/* Inner pages (service pages, about, contact, gallery, blog) on top of site.css + theme.css. */
.page { padding-block: clamp(3rem, 8vw, 7rem) var(--section); row-gap: 3rem; }
.page__head { grid-column: 1 / -1; display: grid; gap: 1.25rem; }
.page__head h1 { font-size: var(--step-head); line-height: 0.92; max-width: 18ch; }
.page__head p { color: var(--muted); font-size: var(--step-lead); line-height: 1.35; }
.page__pic { grid-column: 1 / 5; align-self: start; position: sticky; top: 5rem; }
.page__body { grid-column: 6 / -1; display: grid; gap: 1.1rem; line-height: 1.6; }
.page__body--wide { grid-column: 1 / -1; }
.page__body h2, .page__body h3 { font-family: var(--font); font-weight: 700; text-transform: none; letter-spacing: -0.02em; line-height: 1.2; font-size: var(--step-lead); margin-top: 1.5rem; }
.page__body h3 { font-size: var(--step-body); }
.page__body ul { padding-left: 1.2em; display: grid; gap: 0.4rem; }
.page__body .btn { justify-self: start; margin-top: 1rem; }

.links { display: grid; gap: 0.75rem; }
.links a { font-size: var(--step-lead); font-weight: 700; text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: 0.75rem; transition: opacity 200ms ease; }
.links a:hover { opacity: 0.6; }

.gallery { grid-column: 1 / -1; columns: 3 280px; column-gap: var(--gutter); }
.gallery img { width: 100%; margin-bottom: var(--gutter); break-inside: avoid; }

@media (max-width: 59.99em) {
  .page__pic, .page__body { grid-column: 1 / -1; }
  .page__pic { position: static; max-width: 28rem; }
}

.links--small a { font-size: var(--step-body); padding-bottom: 0.5rem; }
.links--small h2 { margin-top: 0; }