.about-section-title {
  margin-bottom: var(--space-s-m);

  font-family: var(--secondary-font);
  font-size: var(--step-2);
  font-weight: 500;
  line-height: 1.2;
  color: var(--color-text);
}

.about-section__body {
  font-size: var(--step-0);
}

/* ===== Hero ===== */

@media only screen and (min-width: 0rem) {
  .about-hero {
    padding: var(--section-padding);
    border-bottom: 1px solid var(--color-divider);

    background-color: var(--color-surface);

    .content-wrapper {
      display: flex;
      align-items: center;
      flex-direction: column;
      gap: var(--space-l);

      .about-hero__headline {
        font-family: var(--secondary-font);
        font-size: var(--step-4);
        font-weight: 500;
        line-height: 1.05;
      }

      .about-hero__subheadline {
        margin-top: var(--space-s);
        font-size: var(--step-0);
      }

      .about-hero__image {
        border-radius: 4px;
        overflow: hidden;
      }
    }
  }
}

@media only screen and (min-width: 48rem) {
  .about-hero {
    .content-wrapper {
      display: flex;
      flex-direction: row;
      .about-hero__copy {
        flex: 1;
      }

      .about-hero__image {
        flex: 1;
        object-fit: cover;
        object-position: center;
      }
    }
  }
}

/* ===== Intro ===== */

@media only screen and (min-width: 0rem) {
  .about-intro {
    padding: var(--section-padding);

    .about-intro__body {
      display: flex;
      flex-direction: column;
      gap: var(--space-s);
    }
  }
}

@media only screen and (min-width: 48rem) {
  .about-intro {
    .about-intro__body {
      font-size: var(--step-0);
      display: block;
      column-count: 2;
      column-gap: var(--space-xl);
      column-fill: balance;
    }

    .about-intro__body p {
      /*break-inside: avoid;*/
      margin-bottom: var(--space-s);
    }

    .about-intro__body p:last-child {
      margin-bottom: 0;
    }
  }
}

/* ===== Values ===== */

@media only screen and (min-width: 0rem) {
  .about-values {
    padding: var(--section-padding);

    background: var(--color-surface-2);

    .about-values__grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
      gap: var(--space-m);
    }

    .about-values__card {
      display: flex;
      flex-direction: column;
      gap: var(--space-2xs);

      border: 1px solid var(--color-divider);
      border-radius: 4px;
      padding: var(--space-m);

      background: var(--color-surface);
    }

    .about-values__card-title {
      color: var(--color-text);
      font-size: var(--step-0);
      font-weight: 600;
    }

    .about-values__card-body {
      font-size: var(--step-0);
    }
  }
}

/* ===== Location ===== */

@media only screen and (min-width: 0rem) {
  .about-location {
    padding: var(--section-padding);

    hr {
      height: 1px;
      border: none;

      background-color: var(--color-divider);
    }
    .about-location__grid {
      display: grid;
      gap: var(--space-l);
    }

    .about-location__intro {
      font-size: var(--step-0);
      color: var(--color-text);
    }

    .about-location__addresses {
      display: flex;
      flex-direction: column;
      gap: var(--space-s);
    }

    .about-location__text {
      display: flex;
      flex-direction: column;
      gap: var(--space-s);
    }

    .about-location__address-label {
      margin-bottom: var(--space-3xs);

      font-size: var(--step--2);
      font-weight: 600;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: var(--color-accent);
    }

    .about-location__address-text {
      font-size: var(--step--1);
      line-height: 1.5;
      color: var(--color-text);
    }

    .about-location__map {
      display: block;

      width: 100%;
      aspect-ratio: 5 / 3;
      border: 1px solid var(--color-divider);

      background: var(--color-surface-2);
      border-radius: 4px;
    }

    .about-location__map:focus-visible {
      outline: 3px solid color-mix(in srgb, var(--color-accent) 55%, white);
      outline-offset: -3px;
    }
  }
}

@media only screen and (min-width: 48rem) {
  .about-location {
    .about-location__grid {
      grid-template-columns: 1fr 1.3fr;
    }
  }
}