@layer pages {
  .main {
    display: flow-root;
    padding-block: var(--space-32);

    & h1 {
      margin: 0 0 0.67em;
    }

    & > .wrapper {
      display: grid;
      grid-template-columns: 59% 39%;
      column-gap: var(--space-4);
      align-items: start;

      & > :is(section, aside) {
        inline-size: auto;
        min-inline-size: 0;
      }

      @media (max-width: 950px) {
        display: block;
      }
    }

    & section {
      padding-block-start: var(--space-64);
      padding-inline-end: var(--space-32);
      line-height: 1.35;

      & > p {
        margin-block: 0 1em;
      }

      @media (max-width: 950px) {
        margin-block-end: 0;
        padding-inline-end: 0;
      }
    }

    & img {
      vertical-align: text-top;
    }

    & .hello {
      font-size: var(--text-lead);
      line-height: var(--leading-body);
    }

    & .social {
      & a {
        text-decoration: none;
      }

      & :is(img, .twitter-follow-button) {
        margin-block-start: -4px;
        vertical-align: middle;
      }

      & img {
        margin-block-end: var(--space-4);
      }
    }

    & aside {
      padding: var(--space-4) var(--space-12);
      border: 5px solid var(--color-paper);
      border-block-end-width: 25px;
      border-radius: var(--radius-l);
      font: 400 var(--text-small) / var(--leading-small) var(--font-mono);

      @media (max-width: 950px) {
        margin-block-start: var(--space-32);
      }
    }

    @media (max-width: 950px) {
      padding-block-end: var(--space-24);
    }
  }

  .instagram {
    padding-block: var(--space-20);
    background:
      var(--pattern-noise),
      linear-gradient(var(--color-muted), var(--color-charcoal)) var(--color-charcoal);
    box-shadow:
      inset 0 10px 15px -10px var(--color-ink),
      inset 0 -10px 15px -10px var(--color-ink);

    & h2 {
      margin: 0;
      color: var(--color-paper);
      text-transform: lowercase;
      text-shadow: var(--color-ink) 0 1px 0;

      & a {
        color: var(--color-paper);
        text-decoration: none;
      }
    }

    & .images {
      --edge-fade: clamp(16px, 6vw, 80px);
      display: grid;
      grid-auto-flow: column;

      grid-auto-columns: clamp(120px, 40%, 160px);
      gap: var(--space-12);
      max-inline-size: 1600px;
      margin-block-start: var(--space-16);
      margin-inline: auto;
      padding: var(--space-8) var(--edge-fade) var(--space-16);
      overflow-x: auto;
      overscroll-behavior-x: contain;
      scroll-snap-type: x mandatory;
      scroll-padding-inline: var(--edge-fade);
      scrollbar-color: var(--color-muted) transparent;
      scrollbar-width: thin;
      mask-image: linear-gradient(
        to right,
        transparent,
        #000 var(--edge-fade),
        #000 calc(100% - var(--edge-fade)),
        transparent
      );

      @media (prefers-reduced-motion: no-preference) {
        scroll-behavior: smooth;
      }

      @supports selector(::scroll-button(*)) {
        anchor-name: --instagram;
        scrollbar-width: none;

        &::scroll-button(*) {
          position: absolute;
          position-anchor: --instagram;

          inset-block-start: calc(anchor(center) - 28px);
          display: grid;
          place-items: center;
          inline-size: 48px;
          block-size: 48px;
          border: 0;
          border-radius: 50%;
          background: var(--color-paper);
          box-shadow: var(--elevation-2);
          color: var(--color-charcoal);
          font: 32px / 1 var(--font-text);
          cursor: pointer;
          transition:
            opacity var(--transition-state),
            background-color var(--transition-state),
            scale var(--transition-state);
        }

        &::scroll-button(*):hover {
          background: var(--color-page);
        }

        &::scroll-button(*):active {
          scale: 0.92;
        }

        &::scroll-button(*):disabled {
          opacity: 0;
          pointer-events: none;
        }

        &::scroll-button(inline-start) {
          content: '‹' / 'Предыдущие фотографии';
          inset-inline-start: calc(anchor(start) + var(--edge-fade) - 24px);
        }

        &::scroll-button(inline-end) {
          content: '›' / 'Следующие фотографии';
          inset-inline-end: calc(anchor(end) + var(--edge-fade) - 24px);
        }

        @media (max-width: 600px), (pointer: coarse) {
          &::scroll-button(*) {
            content: none;
          }
        }
      }

      & a {
        display: block;
        min-inline-size: 0;
        padding: var(--space-4) var(--space-4) var(--space-16);
        border-radius: var(--radius-s);
        background: var(--color-paper);
        box-shadow: var(--elevation-2);
        line-height: 0;
        scroll-snap-align: start;
        scroll-snap-stop: always;
        transition: translate var(--transition-state);

        &:is(:hover, :focus-visible) {
          translate: 0 -2px;
        }

        &:active {
          translate: 0;
        }

        @supports (rotate: random(-2deg, 2deg)) {
          rotate: random(-2.5deg, 2.5deg);
        }
      }

      & img {
        display: block;
        inline-size: 100%;
        block-size: auto;
        aspect-ratio: 1;
        object-fit: cover;
        background: var(--color-line-soft);
      }
    }
  }
}