/* Vehicle configuration belongs to the photo and interactive vehicle stage. */
.vstudio{--spec-panel-height:172px;min-height:720px}
.vstudio .vs-poster img{object-fit:cover}
.vstudio .vs-poster::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(11,11,12,.7),transparent 20%)}
.vstudio .vehicle-overview{position:absolute;inset:auto 0 0;z-index:3;padding:28px 0 20px;background:linear-gradient(180deg,rgba(11,11,12,0),rgba(11,11,12,.84) 25%,rgba(11,11,12,.96));color:var(--bone)}
.vstudio .vehicle-overview .specs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin:0;border-top:1px solid rgba(242,239,233,.24)}
.vstudio .vehicle-overview .specs>div{min-width:0;padding:16px 24px 0;border-color:rgba(242,239,233,.18)}
.vstudio .vehicle-overview .specs>div:first-child{padding-left:0}
.vstudio .vehicle-overview .specs dt{color:#b9b6af;font-size:12px;line-height:1.5;letter-spacing:.025em}
.vstudio .vehicle-overview .specs dd{margin:8px 0 0;font-size:clamp(22px,2vw,30px);line-height:1.35;color:#f2efe9}
.vstudio .vehicle-overview .spec-summary{margin:12px 0 0;color:#b9b6af;font-size:12px;line-height:1.5}
.vstudio .vs-start{left:var(--pad);transform:none;bottom:calc(var(--spec-panel-height) + 16px)}
.vstudio .vs-bar{bottom:calc(var(--spec-panel-height) + 24px)}
.vstudio .vs-hint{bottom:calc(var(--spec-panel-height) + 28px)}
@media(max-width:900px){
 .vstudio{--spec-panel-height:212px;min-height:760px}
 .vstudio .vehicle-overview{padding:24px 0 16px}
 .vstudio .vehicle-overview .specs{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:16px}
 .vstudio .vehicle-overview .specs>div{padding:0 16px}
 .vstudio .vehicle-overview .specs>div:nth-child(odd){padding-left:0;border-left:0}
 .vstudio .vehicle-overview .specs>div:nth-child(-n+2){padding-top:14px}
 .vstudio .vehicle-overview .specs dd{font-size:22px;margin-top:5px}
 .vstudio .vehicle-overview .spec-summary{margin-top:14px;font-size:11px}
 .vstudio .vs-hint{bottom:calc(var(--spec-panel-height) + 134px);right:20px;font-size:10px}
 .vstudio .vs-start{left:50%;transform:translateX(-50%);bottom:calc(var(--spec-panel-height) + 12px)}
 .vstudio .vs-bar{bottom:calc(var(--spec-panel-height) + 16px)}
 .vstudio .vs-poster img{object-position:center calc(50% - 62px)}
}

/* On narrow screens, let the photograph size itself instead of centering it in a tall empty frame. */
@media(max-width:900px){
 #studio.vstudio{display:flex;flex-direction:column;height:auto;min-height:0}
 #studio.vstudio .vs-top{position:relative;inset:auto;order:0;width:100%;padding-top:calc(var(--nav) + 36px);padding-bottom:24px}
 #studio.vstudio .vs-poster{position:relative;inset:auto;order:1;width:100%;overflow:hidden;flex:none}
 #studio.vstudio .vs-poster picture{position:relative;inset:auto;left:-45%;width:160%;height:auto}
 #studio.vstudio .vs-poster img{display:block;width:100%;height:auto;object-fit:contain;object-position:center}
 #studio.vstudio .vs-gl{display:block;visibility:hidden;position:absolute;inset:auto;left:0;top:0;width:100%;height:clamp(300px,48svh,420px)}
 #studio.vstudio.interactive-ready .vs-poster{display:none}
 #studio.vstudio.interactive-ready .vs-gl{visibility:visible;position:relative;inset:auto;order:1;width:100%;height:clamp(300px,48svh,420px);flex:none}
 #studio.vstudio .vs-start{position:relative;inset:auto;order:2;transform:none;margin:18px auto 12px}
 #studio.vstudio .vs-bar{position:relative;inset:auto;order:2;transform:none;align-self:center;margin:18px auto 12px}
 #studio.vstudio:not(.interactive-ready) .vs-bar{display:none}
 #studio.vstudio .vehicle-overview{position:relative;inset:auto;order:3;width:100%;padding-top:16px}
 #studio.vstudio .vs-hint{display:none}
}