.profile {
  display: grid;
  grid-template-rows: auto 1fr;
  min-height: 100%;

  & > header {
    @include font-size(3);
    display: grid;
    grid-template-columns: 1fr;

    & > section {
      display: flex;
      align-items: center;
      gap: spacer(3);
      border-bottom: $border;
      padding: $body-padding-mobile;
      padding-top: spacer(6);
      padding-bottom: spacer(6);

      &:not(:first-child) {
        grid-column: span 2;
      }

      &.links {
        grid-row: 1;
        grid-column: 2;
      }
    }
  }

  main {
    grid-row: unset;
  }

  @include breakpoint-up(lg, true) {
    & > header {
      grid-auto-flow: column;
      gap: spacer(6);
      padding: spacer(5) $body-padding-desktop-center;
      align-items: center;
      border-bottom: $border;

      & > section {
        border: none;
        padding: 0;
        grid-row: unset;
        grid-column: unset;
      }
    }

    main > footer {
      padding: spacer(5) $body-padding-desktop-center;
      text-align: left;
    }
  }

  &.reader main {
    > article {
      @include font-size(3);
    }

    @include breakpoint-up(lg) {
      > article,
      > .comments {
        padding-right: max((100% - #{size(50)}) - #{$body-padding-desktop-center}, #{$body-padding-desktop});
      }
    }
  }
}
