/* Terrace technology: two systems and five detail photographs. */
.terrace-tech__header { margin-bottom: 26px; }
.terrace-tech__header h2 { max-width: 24ch; margin-bottom: 0; }
.terrace-tech__systems { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.terrace-tech__system { display: flex; flex-direction: column; min-width: 0; background: #f5f2ec; }
.terrace-tech__system > img { display: block; width: 100%; height: clamp(180px, 20vw, 280px); object-fit: cover; object-position: center 65%; }
.terrace-tech__copy { padding: 22px; }
.terrace-tech__copy h3 { max-width: none; margin: 0 0 12px; }
.terrace-tech__copy p { margin: 0; color: var(--medium); }
.terrace-tech__details { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; margin-top: 8px; }
.terrace-tech__detail { position: relative; min-width: 0; margin: 0; overflow: hidden; }
.terrace-tech__detail img { display: block; width: 100%; height: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: center 65%; }
.terrace-tech__detail::after { content: ""; position: absolute; inset: 45% 0 0; background: linear-gradient(transparent, rgba(15,22,17,.65)); pointer-events: none; }
.home-page.site-typography.terrace-page main .terrace-tech__detail figcaption { position: absolute; z-index: 1; inset: auto 12px 14px; color: #fff; font: 400 .9375rem/1.4 "Inter", sans-serif; }
@media (max-width: 1020px) {
  .terrace-tech__systems { gap: 16px; }
  .terrace-tech__copy { padding: 18px; }
  .terrace-tech__details { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .terrace-tech__systems { grid-template-columns: 1fr; gap: 16px; }
  .terrace-tech__system > img { height: auto; aspect-ratio: 16 / 9; }
  .terrace-tech__details { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .home-page.site-typography.terrace-page main .terrace-tech__detail figcaption { inset: auto 10px 12px; font-size: .875rem; }
}