:root {
    /* Gallery */
    --cb-card-gallery-columns: 3;
    --cb-card-gallery-gap: 2rem;

    /* Card */
    --cb-card-gallery-card-padding-maxi: 1rem;
    --cb-card-gallery-card-padding-mini: 0;
    --cb-card-gallery-card-bg: #fafafa;
    --cb-card-gallery-card-border-radius: 1rem;
    --cb-card-gallery-shadow-maxi: none;
    --cb-card-gallery-shadow-mini: 5px 5px 25px rgb(0 0 0 / 33%);

    --cb-card-gallery-content-padding-maxi: 0;
    --cb-card-gallery-content-padding-mini: 1rem;

    /* Image */
    --cb-card-gallery-img-margin-maxi: var(--cb-card-gallery-card-padding-maxi);
    --cb-card-gallery-img-margin-mini: 0;

    --cb-card-gallery-img-border-radius-top-left-maxi: 0;
    --cb-card-gallery-img-border-radius-top-right-maxi: 0;
    --cb-card-gallery-img-border-radius-bottom-left-maxi: 0;
    --cb-card-gallery-img-border-radius-bottom-right-maxi: 0;

    --cb-card-gallery-img-border-radius-top-left-mini: var(--cb-card-gallery-card-border-radius);
    --cb-card-gallery-img-border-radius-top-right-mini: var(--cb-card-gallery-card-border-radius);
    --cb-card-gallery-img-border-radius-bottom-left-mini: 0;
    --cb-card-gallery-img-border-radius-bottom-right-mini: 0;
}

.cb-card-gallery {
    container: cb-card-gallery / inline-size;
}
.cb-card-gallery__grid {
    gap: var(--cb-card-gallery-gap);
    grid-template-columns: repeat(var(--cb-card-gallery-columns), 1fr);

    display: grid;
    grid-auto-rows: min-content;
}

/* Cards */
.cb-card-gallery__card {
    background-color: var(--cb-card-gallery-card-bg);
    border-radius: var(--cb-card-gallery-card-border-radius);

    /* not variable */
    display: grid;
    grid-template-rows: subgrid;
    grid-row: span 3;
    row-gap: 0;
}

/* Image */
.cb-card-gallery__img {
    grid-row: 1;
    overflow: clip;
}
.cb-card-gallery__img img {
    display: block;
    width: 100%;
}

/* Content */
/* take up all space by default */
.cb-card-gallery__content {
    grid-row: 1 / span 3;
}
/* content should take up less space if there is a image*/
.cb-card-gallery__card:has(.cb-card-gallery__img) .cb-card-gallery__content {
    grid-row: 2 / span 2;
}
/* content should take up less space if there is a link*/
.cb-card-gallery__card:has(.cb-card-gallery__link) .cb-card-gallery__content {
    grid-row: 1 / span 2;
}
/* content should take up least space if there is a image and a link*/
.cb-card-gallery__card:has(.cb-card-gallery__img):has(.cb-card-gallery__link) .cb-card-gallery__content {
    grid-row: 2;
}

.cb-card-gallery__body {
    >:last-child {
        margin-block-end: 0;
    }
}

.cb-card-gallery__link {
    grid-row: 3;
}

/* 1 Column */
.cb-card-gallery__grid[data-columns="1"] {
    --cb-card-gallery-columns: 1;
}

/* 2 Columns */
.cb-card-gallery__grid[data-columns="2"] {
    --cb-card-gallery-columns: 2;
}

@container cb-card-gallery (width < 40rem) {
    .cb-card-gallery__grid[data-columns="2"] {
        --cb-card-gallery-columns: 1;
    }
}

/* 3 Columns */
.cb-card-gallery__grid[data-columns="3"] {
    --cb-card-gallery-columns: 3;
}

@container cb-card-gallery (width < 55rem) {
    .cb-card-gallery__grid[data-columns="3"] {
        --cb-card-gallery-columns: 1;
    }
}

/* 4 Columns */
.cb-card-gallery__grid[data-columns="4"] {
    --cb-card-gallery-columns: 4;
}

@container cb-card-gallery (width < 55rem) {
    .cb-card-gallery__grid[data-columns="4"] {
        --cb-card-gallery-columns: 2;
    }
}
@container cb-card-gallery (width < 40rem) {
    .cb-card-gallery__grid[data-columns="4"] {
        --cb-card-gallery-columns: 1;
    }
}

/* Maxi Cards */
.cb-card-gallery__grid[data-type="maxi"] .cb-card-gallery__card {
    box-shadow: var(--cb-card-gallery-shadow-maxi);
    padding: var(--cb-card-gallery-card-padding-maxi);
}

.cb-card-gallery__grid[data-type="maxi"] .cb-card-gallery__img {
    margin-bottom: var(--cb-card-gallery-img-margin-maxi);
    border-top-left-radius: var(--cb-card-gallery-img-border-radius-top-left-maxi);
    border-top-right-radius: var(--cb-card-gallery-img-border-radius-top-right-maxi);
    border-bottom-left-radius: var(--cb-card-gallery-img-border-radius-bottom-left-maxi);
    border-bottom-right-radius: var(--cb-card-gallery-img-border-radius-bottom-right-maxi);
}

.cb-card-gallery__grid[data-type="maxi"] .cb-card-gallery__content {
    padding: var(--cb-card-gallery-content-padding-maxi);
}

.cb-card-gallery__grid[data-type="maxi"] .cb-card-gallery__link {
    padding: var(--cb-card-gallery-content-padding-maxi);
}


/* Mini Cards */
.cb-card-gallery__grid[data-type="mini"] .cb-card-gallery__card {
    box-shadow: var(--cb-card-gallery-shadow-mini);
    padding: var(--cb-card-gallery-card-padding-mini);
}

.cb-card-gallery__grid[data-type="mini"] .cb-card-gallery__img {
    margin-bottom: var(--cb-card-gallery-img-margin-mini);
    border-top-left-radius: var(--cb-card-gallery-img-border-radius-top-left-mini);
    border-top-right-radius: var(--cb-card-gallery-img-border-radius-top-right-mini);
    border-bottom-left-radius: var(--cb-card-gallery-img-border-radius-bottom-left-mini);
    border-bottom-right-radius: var(--cb-card-gallery-img-border-radius-bottom-right-mini);
}

.cb-card-gallery__grid[data-type="mini"] .cb-card-gallery__content {
    padding: var(--cb-card-gallery-content-padding-mini);
}

.cb-card-gallery__grid[data-type="mini"] .cb-card-gallery__link {
    padding: var(--cb-card-gallery-content-padding-mini);
}