#calc{scroll-margin-top:90px}
.calc-photo{position:relative;margin:32px 0 0}
.calc-photo img,.calc-example>img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover}
.calc-photo img{height:clamp(200px,20vw,280px)}
.calc-photo figcaption{position:absolute;right:0;bottom:0;left:0;margin:0;padding:28px 16px 14px;background:linear-gradient(transparent,rgba(14,16,10,.75));color:var(--bg);font-size:14px;line-height:1.5}
.calc-example{display:grid;grid-template-columns:.85fr 1.15fr;margin-top:32px;border:1px solid rgba(244,242,237,.2);color:var(--bg)}
.calc-example>img{height:100%;aspect-ratio:auto}
.calc-example:hover{color:var(--bg);border-color:var(--sage)}
.calc-example-body{padding:22px 24px}
.calc-example-title{display:block}
.calc-example-title h3{margin:0;font-size:26px;font-weight:500;line-height:1.2}
.calc-example-title>span{display:block;margin-top:8px;white-space:nowrap;font-size:18px;color:var(--sage)}
.calc-example-price{margin-top:16px;font-size:22px;line-height:1.3;color:var(--sage)}
.calc-example p{margin:14px 0 0;font-size:16px;line-height:1.6;color:var(--light)}
.calc-example-description{white-space:pre-line}
.calc-example p.calc-example-note{font-size:14px}
.calc-example-link{display:block;margin-top:20px;font-size:15px;color:var(--sage)}
.calc-photo[hidden],.calc-example[hidden]{display:none}
#calc[data-calc-layout="photo"] .calc-layout,#calc[data-calc-layout="project"] .calc-layout{align-items:end}
#calc[data-calc-layout="wide"] .calc-layout{grid-template-columns:1fr;gap:40px}
#calc[data-calc-layout="wide"] .calc-intro{display:grid;grid-template-columns:1.2fr 1fr;gap:64px;align-items:end}
#calc[data-calc-layout="wide"] .calc-intro .h3{max-width:21em}
#calc[data-calc-layout="wide"] .lead-dark{margin:0;max-width:26em}
#calc[data-calc-layout="wide"] .card{display:grid;grid-template-columns:1.1fr 1fr;gap:48px;padding:36px}
#calc[data-calc-layout="wide"] .fields{margin-top:0}
#calc[data-calc-layout="wide"] .fine{max-width:40em}
@media(max-width:1100px){
  #calc[data-calc-layout="wide"] .calc-intro{grid-template-columns:1fr;gap:24px}
  #calc[data-calc-layout="wide"] .card{gap:32px}
  #calc[data-calc-layout="wide"] .fields{grid-template-columns:1fr;gap:16px}
  .calc-photo,.calc-example{max-width:640px}
}
@media(max-width:760px){
  #calc[data-calc-layout="wide"] .card{grid-template-columns:1fr;padding:26px 20px;gap:0}
  #calc[data-calc-layout="wide"] .fields{margin-top:20px}
  #calc[data-calc-layout="wide"] .calc-layout{gap:32px}
  .calc-photo,.calc-example{margin-top:28px}
  .calc-example{grid-template-columns:1fr}
  .calc-photo img,.calc-example>img{height:auto;aspect-ratio:16/9}
  .calc-example-body{padding:20px}
  .calc-example-title h3{font-size:24px}
  .calc-example-price{font-size:21px}
}