/* artlayout.css v30: one layout for every snow design card (designs page + design pages).
   Large art (board-shaped) on the left, board thumbnails stacked on the right, same sizes everywhere. */
:root{--al-tw:150px;--al-g:10px;--al-th:calc(var(--al-tw)*16/9);--al-ah:calc(var(--al-th)*2 + var(--al-g));--al-aw:calc(var(--al-ah)*0.1967)}
@media(max-width:480px){:root{--al-tw:130px}}
.gallery .card .pair:has(>img[src*="/flat-art/"]){display:grid!important;grid-template-columns:var(--al-aw) var(--al-tw)!important;grid-template-rows:var(--al-th) var(--al-th);grid-auto-flow:column;gap:var(--al-g)!important;justify-content:center;align-items:start}
.gallery .card .pair:has(>img[src*="/flat-art/"])>img:first-child{grid-column:1;grid-row:1/span 2;width:var(--al-aw)!important;height:var(--al-ah)!important;max-width:none;object-fit:cover;object-position:center;border-radius:50%/9%;background:#0b0d10}
.gallery .card .pair:has(>img[src*="/flat-art/"])>:not(:first-child){grid-column:2;width:var(--al-tw)!important;height:var(--al-th)!important;max-width:none;overflow:hidden;position:relative;border-radius:10px;align-self:start}
.gallery .card .pair:has(>img[src*="/flat-art/"])>img:not(:first-child){object-fit:cover}
.gallery .card .pair:has(>img[src*="/flat-art/"]) .bind-wrap>img,.gallery .card .pair:has(>img[src*="/flat-art/"]) .bind-wrap>svg{position:absolute;top:0;left:0;width:100%!important;height:100%!important;inset:auto}
/* 3:4 snowboard photos: fill the 9:16 box by trimming the empty snow at the sides; the overlay moves with it */
.gallery .card .pair:has(>img[src*="/flat-art/"]) .bind-wrap>img[height="675"],.gallery .card .pair:has(>img[src*="/flat-art/"]) .bind-wrap>img[height="675"]~svg{width:133.333%!important;left:-16.667%}