/* Shared CMS gallery compositions. Page styles retain their framing and breakpoints. */
:is(.gallery-grid, .workshop-gallery-grid)[data-count="1"] :is(.image-frame, .workshop-gallery-image) {
    grid-column: 1 / -1;
    grid-row: span 4;
}

:is(.gallery-grid, .workshop-gallery-grid)[data-count="2"] :is(.image-frame, .workshop-gallery-image) {
    grid-column: span 6;
    grid-row: span 3;
}

:is(.gallery-grid, .workshop-gallery-grid)[data-count="3"] :is(.image-frame, .workshop-gallery-image):first-child {
    grid-column: span 7;
    grid-row: span 4;
}

:is(.gallery-grid, .workshop-gallery-grid)[data-count="3"] :is(.image-frame, .workshop-gallery-image):not(:first-child) {
    grid-column: span 5;
    grid-row: span 2;
}

:is(.gallery-grid, .workshop-gallery-grid)[data-layout="wide"] :is(.image-frame, .workshop-gallery-image) {
    grid-column: span 6;
    grid-row: span 3;
}

:is(.gallery-grid, .workshop-gallery-grid)[data-layout="wide"] :is(.image-frame, .workshop-gallery-image):first-child {
    grid-column: 1 / -1;
    grid-row: span 4;
}

:is(.gallery-grid, .workshop-gallery-grid)[data-layout="wide"][data-count="1"] :is(.image-frame, .workshop-gallery-image),
:is(.gallery-grid, .workshop-gallery-grid)[data-layout="wide"][data-count="2"] :is(.image-frame, .workshop-gallery-image) {
    grid-column: 1 / -1;
}

:is(.gallery-grid, .workshop-gallery-grid)[data-layout="tall"] :is(.image-frame, .workshop-gallery-image) {
    grid-column: span 5;
    grid-row: span 2;
}

:is(.gallery-grid, .workshop-gallery-grid)[data-layout="tall"] :is(.image-frame, .workshop-gallery-image):first-child {
    grid-column: span 7;
    grid-row: span 4;
}

:is(.gallery-grid, .workshop-gallery-grid)[data-layout="tall"][data-count="1"] :is(.image-frame, .workshop-gallery-image) {
    grid-column: 1 / -1;
    grid-row: span 4;
}

:is(.gallery-grid, .workshop-gallery-grid)[data-layout="tall"][data-count="2"] :is(.image-frame, .workshop-gallery-image) {
    grid-column: span 5;
    grid-row: span 4;
}

:is(.gallery-grid, .workshop-gallery-grid)[data-layout="tall"][data-count="2"] :is(.image-frame, .workshop-gallery-image):first-child {
    grid-column: span 7;
}

:is(.gallery-grid, .workshop-gallery-grid)[data-layout="grid"] :is(.image-frame, .workshop-gallery-image) {
    grid-column: span 4;
    grid-row: span 3;
}

:is(.gallery-grid, .workshop-gallery-grid)[data-layout="grid"][data-count="1"] :is(.image-frame, .workshop-gallery-image) {
    grid-column: 1 / -1;
    grid-row: span 4;
}

:is(.gallery-grid, .workshop-gallery-grid)[data-layout="grid"][data-count="2"] :is(.image-frame, .workshop-gallery-image) {
    grid-column: span 6;
}

:is(.gallery-grid, .workshop-gallery-grid)[data-layout="filmstrip"] :is(.image-frame, .workshop-gallery-image) {
    grid-column: 1 / -1;
    grid-row: span 3;
}

:is(.gallery-grid, .workshop-gallery-grid)[data-layout="compact"] {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    grid-auto-rows: auto;
    gap: 10px;
}

:is(.gallery-grid, .workshop-gallery-grid)[data-layout="compact"][data-count] :is(.image-frame, .workshop-gallery-image),
:is(.gallery-grid, .workshop-gallery-grid)[data-layout="compact"][data-count] :is(.image-frame, .workshop-gallery-image):first-child {
    grid-column: auto;
    grid-row: auto;
    aspect-ratio: 1;
}

:is(.gallery-grid, .workshop-gallery-grid)[data-layout="spotlight"] {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    grid-auto-rows: auto;
}

:is(.gallery-grid, .workshop-gallery-grid)[data-layout="spotlight"][data-count] :is(.image-frame, .workshop-gallery-image) {
    grid-column: span 3;
    grid-row: auto;
    aspect-ratio: 1.25;
}

:is(.gallery-grid, .workshop-gallery-grid)[data-layout="spotlight"][data-count] :is(.image-frame, .workshop-gallery-image):first-child {
    grid-column: 1 / -1;
    aspect-ratio: 2.7;
}

:is(.gallery-grid, .workshop-gallery-grid)[data-layout="spotlight"][data-count="2"] :is(.image-frame, .workshop-gallery-image):not(:first-child) {
    grid-column: 1 / -1;
    aspect-ratio: 2.4;
}

:is(.gallery-grid, .workshop-gallery-grid)[data-layout="spotlight"][data-count="3"] :is(.image-frame, .workshop-gallery-image):not(:first-child) {
    grid-column: span 6;
}

:is(.gallery-grid, .workshop-gallery-grid)[data-layout="spotlight"][data-count="4"] :is(.image-frame, .workshop-gallery-image):not(:first-child) {
    grid-column: span 4;
}

:is(.gallery-grid, .workshop-gallery-grid)[data-layout="paired"] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: auto;
}

:is(.gallery-grid, .workshop-gallery-grid)[data-layout="paired"][data-count] :is(.image-frame, .workshop-gallery-image),
:is(.gallery-grid, .workshop-gallery-grid)[data-layout="paired"][data-count] :is(.image-frame, .workshop-gallery-image):first-child {
    grid-column: auto;
    grid-row: auto;
    aspect-ratio: 16 / 10;
}

:is(.gallery-grid, .workshop-gallery-grid)[data-layout="paired"][data-count="1"] :is(.image-frame, .workshop-gallery-image):first-child {
    grid-column: 1 / -1;
    aspect-ratio: 16 / 7;
}

:is(.gallery-grid, .workshop-gallery-grid)[data-layout="story"] {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    grid-auto-flow: dense;
    grid-auto-rows: clamp(86px, 8vw, 116px);
}

:is(.gallery-grid, .workshop-gallery-grid)[data-layout="story"][data-count] :is(.image-frame, .workshop-gallery-image):nth-child(4n + 1),
:is(.gallery-grid, .workshop-gallery-grid)[data-layout="story"][data-count] :is(.image-frame, .workshop-gallery-image):nth-child(4n) {
    grid-column: span 8;
    grid-row: span 3;
}

:is(.gallery-grid, .workshop-gallery-grid)[data-layout="story"][data-count] :is(.image-frame, .workshop-gallery-image):nth-child(4n + 2),
:is(.gallery-grid, .workshop-gallery-grid)[data-layout="story"][data-count] :is(.image-frame, .workshop-gallery-image):nth-child(4n + 3) {
    grid-column: span 4;
    grid-row: span 3;
}

:is(.gallery-grid, .workshop-gallery-grid)[data-layout="story"][data-count="1"] :is(.image-frame, .workshop-gallery-image):first-child {
    grid-column: 1 / -1;
}

:is(.gallery-grid, .workshop-gallery-grid)[data-layout="wall"] {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    grid-auto-flow: dense;
    grid-auto-rows: clamp(62px, 6vw, 88px);
}

:is(.gallery-grid, .workshop-gallery-grid)[data-layout="wall"][data-count] :is(.image-frame, .workshop-gallery-image):nth-child(6n + 1),
:is(.gallery-grid, .workshop-gallery-grid)[data-layout="wall"][data-count] :is(.image-frame, .workshop-gallery-image):nth-child(6n + 5) {
    grid-column: span 5;
    grid-row: span 3;
}

:is(.gallery-grid, .workshop-gallery-grid)[data-layout="wall"][data-count] :is(.image-frame, .workshop-gallery-image):nth-child(6n + 2),
:is(.gallery-grid, .workshop-gallery-grid)[data-layout="wall"][data-count] :is(.image-frame, .workshop-gallery-image):nth-child(6n + 4) {
    grid-column: span 4;
    grid-row: span 2;
}

:is(.gallery-grid, .workshop-gallery-grid)[data-layout="wall"][data-count] :is(.image-frame, .workshop-gallery-image):nth-child(6n + 3),
:is(.gallery-grid, .workshop-gallery-grid)[data-layout="wall"][data-count] :is(.image-frame, .workshop-gallery-image):nth-child(6n) {
    grid-column: span 3;
    grid-row: span 3;
}

:is(.gallery-grid, .workshop-gallery-grid)[data-layout="wall"][data-count="1"] :is(.image-frame, .workshop-gallery-image):first-child {
    grid-column: 1 / -1;
    grid-row: span 4;
}