@import "_global.css";
@import "_why-choose-us.css";

#about-content-1,
#about-content-2 { padding: var(--space-section-block) 20px; }
#about-content-1 { background: var(--page-bg); }
#about-content-2 { background: var(--white); }
#about-content-1 .content-wrap,
#about-content-2 .content-wrap { max-width: var(--content-max-width); margin: auto; }

#about-content-1 .content {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
  column-gap: clamp(40px, 7vw, 110px);
  align-items: start;
}
#about-content-1 h1 { grid-column: 1 / -1; max-width: 1020px; margin: 0 0 clamp(36px, 5vw, 64px); font-size: var(--type-page-title); text-wrap: balance; }
#about-content-1 .image { grid-column: 2; grid-row: 2 / span 4; position: sticky; top: 24px; align-self: start; padding: 12px 0 0 12px; border-left: 5px solid var(--primary-color); }
#about-content-1 .image img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; max-height: calc(100vh - 60px); object-fit: cover; }
#about-content-1 .content > p { grid-column: 1; max-width: 66ch; margin: 0 0 25px; }
#about-content-1 .content > p:last-child { margin-bottom: 0; }
#about-content-1 .owner-quote { grid-column: 1; margin: 0 0 25px; padding: 20px 24px; border-left: 5px solid var(--primary-color); background: var(--surface-soft); }
#about-content-1 .owner-quote blockquote { margin: 0; }
#about-content-1 .owner-quote p { margin: 0; font-size: 1.12rem; font-style: italic; line-height: 1.65; }

#about-content-2 .content {
  display: grid;
  grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
  column-gap: clamp(40px, 7vw, 110px);
  align-items: start;
}
#about-content-2 .copy { grid-column: 2; grid-row: 1; }
#about-content-2 h2 { margin: 0 0 var(--space-heading-copy); font-size: var(--type-section-title); text-wrap: balance; }
#about-content-2 .image { grid-column: 1; grid-row: 1; position: sticky; top: 24px; align-self: start; }
#about-content-2 .image img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; max-height: calc(100vh - 60px); object-fit: cover; }
#about-content-2 .copy > p { max-width: 66ch; margin: 0 0 25px; }
#about-content-2 .copy > p:last-child { margin-bottom: 0; }

@media (max-width: 1000px) {
  #about-content-1 .content,
  #about-content-2 .content { grid-template-columns: 1fr; }
  #about-content-1 h1,
  #about-content-1 .image,
  #about-content-1 .content > p,
  #about-content-1 .owner-quote,
  #about-content-2 .copy,
  #about-content-2 .image { grid-column: 1; }
  #about-content-2 .copy { grid-row: 1; }
  #about-content-1 .image,
  #about-content-2 .image { position: static; top: auto; margin-bottom: 32px; }
  #about-content-1 .image { grid-row: auto; }
  #about-content-2 .image { grid-row: 2; margin-top: 32px; margin-bottom: 0; }
  #about-content-1 .image img,
  #about-content-2 .image img { aspect-ratio: 16 / 9; max-height: none; }
  #about-content-1 h1 { margin-bottom: 34px; }
}

@media (max-width: 700px) {
  #about-content-1 .image,
  #about-content-2 .image { margin-bottom: 28px; }
}