.cb-gallery-container {
    --cb-gallery-container-gap-x: 1rem;
    --cb-gallery-container-gap-y: var(--cb-gallery-container-gap-x);
    --cb-gallery-container-gap: var(--cb-gallery-container-gap-y) var(--cb-gallery-container-gap-x);

    --cb-gallery-container-padding: 1rem;

    --cb-gallery-container-headline-color: black;
    --cb-gallery-container-body-color: black;
    --cb-gallery-container-body-bg: lightgrey;

    --cb-gallery-container-item-bg: lightgrey;
    --cb-gallery-container-item-border-radius-top-left: 0;
    --cb-gallery-container-item-border-radius-top-right: 0;
    --cb-gallery-container-item-border-radius-bottom-right: 0;
    --cb-gallery-container-item-border-radius-bottom-left: 0;
    --cb-gallery-container-item-border-radius: var(--cb-gallery-container-item-border-radius-top-left) var(--cb-gallery-container-item-border-radius-top-right) var(--cb-gallery-container-item-border-radius-bottom-right) var(--cb-gallery-container-item-border-radius-bottom-left);
    --cb-gallery-container-item-box-shadow: inset 0 0 5px rgb(0 0 0 / 20%);

    container: cb-gallery-container / inline-size;
}

/* Columns */
:where(.cb-gallery-container--1) .cb-gallery-container__grid {
    --cb-gallery-container-cols: 1;
}
:where(.cb-gallery-container--2) .cb-gallery-container__grid {
    --cb-gallery-container-cols: 2;
}
:where(.cb-gallery-container--4) .cb-gallery-container__grid {
    --cb-gallery-container-cols: 4;
}

.cb-gallery-container__grid {
    display: grid;
    grid-template-rows: min-content;
    grid-template-columns: repeat(var(--cb-gallery-container-cols, 3), 1fr);
    gap: var(--cb-gallery-container-gap);
}

.cb-gallery-container__item {
    display: grid;
    grid-row: span 3;
    grid-template-rows: subgrid;
    gap: 0;
    background-color: var(--cb-gallery-container-item-bg);
    border-radius: var(--cb-gallery-container-item-border-radius);
    box-shadow: var(--cb-gallery-container-item-box-shadow);
}

/* 640px */
@container cb-gallery-container (width < 40rem) {
    :where(.cb-gallery-container--3) .cb-gallery-container__grid,
    :where(.cb-gallery-container--4) .cb-gallery-container__grid {
        --cb-gallery-container-cols: 2;
    }
}

/* 480px */
@container cb-gallery-container (width < 30rem) {
    .cb-gallery-container__grid {
        --cb-gallery-container-cols: 1;
    }
}

/* Themes for items */
/* [data-theme="0"] { default } */
[data-theme="100"] {
    --cb-gallery-container-item-bg: blue;
}
[data-theme="101"] {
    --cb-gallery-container-item-bg: yellow;
}
[data-theme="102"] {
    --cb-gallery-container-item-bg: green;
}
[data-theme="103"] {
    --cb-gallery-container-item-bg: red;
}
[data-theme="104"] {
    --cb-gallery-container-item-bg: grey;
}

.cb-gallery-container__headline {
    grid-row: 1;
    color: var(--cb-gallery-container-headline-color);
    padding: var(--cb-gallery-container-padding);
    margin: 0;
}

.cb-gallery-container__headline a {
    color: currentcolor
}

.cb-gallery-container__img {
    grid-row: 2;
    background-color: var(--cb-gallery-container-body-bg);
}

.cb-gallery-container__img img {
    max-width: 100%;
    height: auto;
}

.cb-gallery-container__body {
    grid-row: 2 / span 2;
    padding: var(--cb-gallery-container-padding);
    color: var(--cb-gallery-container-body-color);
    background: var(--cb-gallery-container-body-bg);
}

.cb-gallery-container__headline + .cb-gallery-container__body {
    grid-row: span 2;
}

.cb-gallery-container__img + .cb-gallery-container__body {
    grid-row: 3;
}