@use "../mixins/media";

.page--about {
  display: flex;
  flex-direction: column;

  @include media.breakpoint(small) {
    display: grid;
    grid:
      "main idcard" auto
      "main funfacts" auto
      "main interests" auto
      "social social" auto
      / auto auto;
  }

  @include media.breakpoint(medium) {
    grid:
      "main main idcard" auto
      "main main ." auto
      "interests funfacts funfacts" auto
      ". social ." auto
      / auto auto auto;
  }

  .main-content {
    grid-area: main;
  }

  .social {
    grid-area: social;
  }

  .interests {
    grid-area: interests;
  }

  .funfacts {
    grid-area: funfacts;
  }
}

.idcard {
  display: flex;
  flex-direction: column;
  grid-area: idcard;
}