@layer sections {
  .about {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding-block: var(--sp-120);
    background: var(--surface-primary);
  }

  .about::after {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 0;
    background: var(--surface-scrim);
    pointer-events: none;
  }

  .about__background {
    position: absolute;
    z-index: -2;
    inset: 4px 0 auto;
    height: 976px;
    overflow: hidden;
  }

  .about__background-frame {
    /* Ширина рамки прив'язана до екрана, а не зафіксована числом.
       1930.499px — це 134.06% від макетних 1440, тому на ширших екранах
       фіксоване значення переставало покривати секцію: на 1920 праворуч
       лишалось 176px голого тла. Решта чисел Figma перерахована в частки
       рамки, тож на 1440 композиція збігається з попередньою до пікселя.

         аспект       1930.499 / 1097.938 = 1.758288
         зсув угору   -44.12 / 1097.938   = -0.0401845
         зсув уліво   181.36 / 1930.499   =  0.0939419                   */
    --about-frame-w: max(1930.499px, 134.0624vw);
    --about-frame-h: calc(var(--about-frame-w) / 1.758288);

    position: absolute;
    top: calc(var(--about-frame-h) * -.0401845);
    left: calc(50% - var(--about-frame-w) * .0939419);
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--about-frame-w);
    height: var(--about-frame-h);
    transform: translateX(-50%);
  }

  .about__background-rotate {
    flex: none;
    transform: rotate(-.5deg);
  }

  .about__background-photo {
    position: relative;
    /* 1921.137 / 1930.499 і 1081.214 / 1097.938 — ті самі частки рамки. */
    width: calc(var(--about-frame-w) * .9951505);
    height: calc(var(--about-frame-h) * .9847661);
    overflow: hidden;
  }

  .about__background-image {
    position: absolute;
    top: -1.02%;
    left: -.53%;
    width: 133.58%;
    height: 108.5%;
    max-width: none;
  }

  .about__content {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--sp-56);
  }

  .about__intro,
  .about__title-group {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }

  .about__intro { gap: var(--sp-16); }
  .about__title-group { gap: var(--sp-24); }

  .about__intro .t-overline { color: var(--label-tertiary); }
  .about__title { max-width: 792px; }
  .about__text { max-width: 690px; }

  .about__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-16);
  }

  .about__stats {
    display: flex;
    flex-direction: column;
    gap: var(--sp-40);
    width: 100%;
  }

  .about__stats-title { max-width: 792px; }

  .about__stats-list {
    display: flex;
    gap: var(--sp-32);
    width: 100%;
    padding: var(--sp-32);
    overflow: hidden;
    border: 0;
    border-radius: var(--r-16);
    background: var(--surface-glass-1);
    box-shadow: inset 0 0 0 .5px var(--surface-separator);
    -webkit-backdrop-filter: blur(30px);
    backdrop-filter: blur(30px);
  }

  .about-stat {
    display: flex;
    flex: 1 1 0;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: var(--sp-12);
    min-width: 0;
    min-height: 106px;
    text-align: center;
  }

  .about__stat-divider {
    flex: 0 0 .5px;
    align-self: stretch;
    border-radius: var(--r-full);
    background: var(--surface-separator);
  }

  .about-stat__value {
    color: var(--label-primary);
    font-family: var(--font-display);
    font-size: var(--fs-h2);
    font-weight: 400;
    letter-spacing: -.03em;
    line-height: 1.12;
  }

  .about-stat__label { color: var(--label-secondary); }

  @media (max-width: 767px) {
    .about { padding-block: var(--sp-96); }

    .about__background {
      inset: 0;
      height: auto;
    }

    .about__background-frame,
    .about__background-rotate,
    .about__background-photo {
      position: absolute;
      inset: 0;
      display: block;
      width: auto;
      height: auto;
      transform: none;
    }

    .about__background-image {
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: 66% 50%;
    }

    .about__title,
    .about__text { max-width: none; }

    .about__text {
      font-size: var(--fs-body-1);
      line-height: 1.3125;
    }

    .about__stats { align-items: center; }
    .about__stats-title { align-self: stretch; }

    .about__stats-list {
      flex-direction: column;
      gap: var(--sp-24);
      width: min(378px, 100%);
    }

    .about-stat {
      flex: none;
      width: 100%;
      min-height: 68px;
    }

    .about__stat-divider {
      width: 100%;
      height: .5px;
      flex-basis: .5px;
    }
  }

  @media (max-width: 420px) {
    .about__actions .btn { flex: 1 1 auto; }
    .about__stats-list { padding-inline: var(--sp-24); }
  }
}