@use "../../css/config/variables/sass" as *;

.block {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto 1fr auto;
  grid-template-areas:
    "header"
    "body"
    "footer";
  gap: $size-little;
  max-width: $width-lcd;
  background-color: var(--colour1-secondary);
  border-radius: $radius-normal;
  padding: $size-small;

  @media (min-width: $width-tablet) {
    gap: $size-normal;
    padding: $size-big;
  }
}

.header {
  grid-area: header;
  align-self: flex-start;
  background-color: var(--colour1-tertiary);
  padding: $size-normal;
}

.body {
  grid-area: body;
  align-self: center;
  background-color: var(--colour1-tertiary);
  padding: $size-normal;
}

.footer {
  grid-area: footer;
  align-self: flex-end;
  background-color: var(--colour1-tertiary);
  padding: $size-normal;
}
