@import 'common.css';

html,
body,
main {
  height: 100%;
  width: 100%;
}

main {
  display: grid;

  padding: 1rem;
  gap: 1rem;

  grid-template: 1fr 1fr 2fr 1fr / 1fr 1fr;

  @media (min-width: 768px) {
    grid-template: 1fr 3fr / 1fr 1fr;
  }

  & > * {
    background-color: grey;
    border-radius: 1rem;

    &:last-of-type {
      grid-column: 1/3;
      @media (min-width: 768px) {
        grid-column: unset;
      }
    }
  }

  & > section {
    display: grid;
    padding: 2rem;
    gap: 1rem;

    grid-column: 1/3;
    @media (min-width: 768px) {
      grid-column: unset;
    }

    grid-template: 1fr 1fr / 1fr 1fr;

    & > * {
      background-color: lightgrey;
      border-radius: 1rem;

      &:nth-child(1) {
        grid-column: 1/3;
      }
    }
  }
}