@use "../mixins/media";

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

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

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

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

  .social {
    grid-area: social;
  }

  .interests {
    grid-area: interests;
  }

  .funfacts {
    grid-area: funfacts;
  }
}

.idcard {
  display: grid;
  max-width: 400px;
  grid-area: idcard;
  grid:
    "header header" auto
    ". bio" auto
    "photo bio" auto
    ".  bio" auto
    / auto 1fr;

  .idcard__picture {
    padding: 50px;
    background: url("../img/about-profile.png");
    background-size: cover;
    background-position: center;

    @include media.breakpoint(small) {
      padding: 75px;
    }
  }

  .idcard__bio {
    grid-area: bio;
    display: grid;
    grid-template-columns: repeat(2, 1fr);

    .idcard__line {
      &--wide {
        @extend .idcard__line;
        grid-column: span 2;
      }
    }
  }

  .idcard__header {
    grid-area: header;
  }

  .idcard__picture {
    grid-area: photo;
  }
}