/* ============================================================
   about-intro.css
   Desktop 1440px: about intro (image + text)
   Mobile  370px:  stacked single column
   ============================================================ */

.about-intro {
  padding-top:    calc(40 / var(--vw-base) * 100vw);
  padding-bottom: calc(40 / var(--vw-base) * 100vw);
  background-color: var(--color-bg);
}

.about-intro .container {
  display: flex;
  gap: calc(30 / var(--vw-base) * 100vw);
}

.about-intro__image {
  flex-shrink: 0;
  width:  calc(605 / var(--vw-base) * 100vw);
  height: calc(350 / var(--vw-base) * 100vw);
  border-radius: calc(20 / var(--vw-base) * 100vw);
  object-fit: cover;
}

.about-intro__content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: calc(20 / var(--vw-base) * 100vw);
  flex: 1;
}

.about-intro__title {
  font-size:   calc(35 / var(--vw-base) * 100vw);
  font-weight: 600;
  line-height: 1.14;
  color: var(--color-text);
}

.about-intro__text {
  font-size:   calc(18 / var(--vw-base) * 100vw);
  font-weight: 400;
  line-height: 1.56;
  color: var(--color-text);
}

/* ── MOBILE ─────────────────────────────────────────────────── */
@media (max-width: 767px) {
  .about-intro {
    padding-top:    calc(15 / var(--vw-base) * 100vw);
    padding-bottom: calc(15 / var(--vw-base) * 100vw);
  }

  .about-intro .container {
    flex-direction: column;
    gap: calc(20 / var(--vw-base) * 100vw);
  }

  .about-intro__image {
    width: 100%;
    height: calc(200 / var(--vw-base) * 100vw);
    border-radius: calc(10 / var(--vw-base) * 100vw);
  }

  .about-intro__content {
    gap: calc(15 / var(--vw-base) * 100vw);
  }

  .about-intro__title {
    font-size:   calc(26 / var(--vw-base) * 100vw);
    line-height: 1.15;
  }

  .about-intro__text {
    font-size:   calc(14 / var(--vw-base) * 100vw);
    line-height: 1.43;
  }
}