/* ==========================================================
   ABOUT Section — layout only
   共通デザインシステム（色・タイポグラフィ・共通コンポーネント）は
   assets/css/locosystem-design-system.css を参照。
   このファイルは ABOUT セクション固有の配置・余白のみを扱う。
========================================================== */

.ls-about {
  overflow: hidden;
}

.ls-about__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(320px, 0.95fr);
  gap: var(--ls-space-80);
  align-items: start;
}

.ls-about__heading {
  margin-bottom: 0;
}

.ls-about__content {
  padding-top: var(--ls-space-64);
}

.ls-about__lead {
  max-width: 620px;
}

.ls-about__link {
  margin-top: var(--ls-space-40);
}

.ls-about__principles {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--ls-space-24);
  margin-top: var(--ls-space-96);
}

.ls-about__card {
  min-height: 100%;
}

@media (max-width: 959px) {
  .ls-about__grid {
    grid-template-columns: 1fr;
    gap: var(--ls-space-48);
  }

  .ls-about__content {
    padding-top: 0;
  }

  .ls-about__principles {
    grid-template-columns: 1fr;
    margin-top: var(--ls-space-72);
  }
}

@media (max-width: 767px) {
  .ls-about__grid {
    gap: var(--ls-space-40);
  }

  .ls-about__link {
    margin-top: var(--ls-space-32);
  }

  .ls-about__principles {
    gap: var(--ls-space-16);
    margin-top: var(--ls-space-64);
  }
}