/* hps/why-local: the case for a local photographer, beside a photo */
.why-sec { padding-block: var(--sec); }
.packages + .why-sec { padding-top: 0; }
.why-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(28px, 5vw, 80px); align-items: start; }
.why-intro p { margin-top: 14px; max-width: 34em; font-size: 1.15rem; line-height: 1.45; color: var(--ink-soft); }
.why-intro p:first-of-type { margin-top: 18px; }
.why-photo { width: 100%; aspect-ratio: 4 / 3; margin-top: clamp(24px, 3vw, 36px); object-fit: cover; border-radius: var(--r-photo); }
.why-list li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 18px; padding-block: clamp(18px, 2.2vw, 26px); border-top: 1px solid var(--line); }
.why-list li:first-child { padding-top: 0; border-top: 0; }
.why-list .i { width: 28px; height: 28px; margin-top: 2px; stroke-width: 1.5; color: var(--wood); }
.why-list h3 { font-family: var(--serif); font-size: 1.45rem; font-weight: 500; line-height: 1.2; }
.why-list p { margin-top: 6px; max-width: 58ch; line-height: 1.45; color: var(--ink-soft); }
.why-sec + .for-whom { padding-top: 0; }
@media (min-width: 961px) { .why-intro { position: sticky; top: calc(var(--head-h) + 24px); }
}
@media (max-width: 960px) {
  .why-grid { grid-template-columns: minmax(0, 1fr); }
  .why-photo { aspect-ratio: 16 / 9; }
}