.dp-gallery{scroll-margin-top:100px}
.dp-thumbs{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px;margin-top:9px}
.dp-thumb{min-width:0;background:#d8d8da;border:1px solid #b9cbd9;padding:2px;cursor:pointer;border-radius:4px}
.dp-thumb img{border:0;width:100%;height:auto;aspect-ratio:4/3;display:block}
.dp-thumb[aria-pressed="true"]{border-color:#173d5b;box-shadow:0 0 0 1px #173d5b}
.dp-thumb:focus-visible{outline:2px solid #346e9c;outline-offset:2px}
.dp-gallery figcaption{display:grid;gap:3px;margin-top:10px;font-size:12px}
.dp-gallery figcaption span:first-child{font-weight:650;color:#183752}
.dp-spec-sheet{border-block:1px solid #dbe4eb;background:#f7f9fa}
.dp-spec-list{margin:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;background:#dbe4eb;border:1px solid #dbe4eb}
.dp-spec-item{background:#fff;padding:20px;scroll-margin-top:100px}
.dp-spec-item dt{font-size:16px;font-weight:700;color:#173d5b;margin-bottom:7px}
.dp-spec-item dd{margin:0;color:#42566b;font-size:14px;line-height:1.55}
.dp-spec-item p{margin:0}
.dp-spec-item p+p{margin-top:8px}
.dp-spec-quote{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:16px}
.dp-spec-quote p{margin:0;color:#42566b;font-size:14px}
.dp-spec-quote a{flex:none}
@media(max-width:640px){
  .dp-thumbs{gap:5px}
  .dp-spec-list{grid-template-columns:1fr}
  .dp-spec-item{padding:14px}
  .dp-spec-quote{align-items:flex-start;flex-direction:column}
}
@media(max-width:365px){.dp-thumbs{grid-template-columns:repeat(3,minmax(0,1fr))}}

.dp-gallery-frame{border:1px solid #c5d3de;border-radius:8px;overflow:hidden;background:#e6ebee}
.dp-gallery-frame .dp-gallery-main{border:0;width:100%;display:block}
.dp-gallery-frame .dp-thumbs{grid-template-columns:repeat(6,minmax(0,1fr));margin:0;padding:9px;gap:7px;border-top:1px solid #c5d3de}
.dp-gallery-frame .dp-thumb{background:#d8d8da}
@media(min-width:1001px){
  .dp-hero:has(.dp-gallery){grid-template-columns:minmax(0,.68fr) minmax(0,1.32fr);gap:clamp(24px,3.2vw,46px);align-items:start}
  .dp-hero:has(.dp-gallery) .dp-hero-copy{padding-top:14px}
}
@media(max-width:760px){
  .dp-hero:has(.dp-gallery){display:grid;grid-template-columns:minmax(0,1fr);gap:16px}
  .dp-hero:has(.dp-gallery) .dp-hero-photo{order:1}
  .dp-hero:has(.dp-gallery) .dp-hero-copy{order:2}
  .dp-gallery-frame .dp-thumbs{padding:6px;gap:4px}
  .dp-gallery-frame .dp-thumb{padding:1px;min-height:36px}
}
