.cb-tiles-grid {
    grid-column: 1 / -1;
    width: 100%;
    container: cb-tiles-grid / inline-size;
    margin-block: 3rem;
}

.cb-tiles-grid--layout2 .cb-tiles-grid__grid {
    grid-template-columns: repeat(4, 1fr);
}
.cb-tiles-grid--layout2 .cb-tiles-grid__tile:first-child {
    grid-column: span 1;
    grid-row: span 1;
}

.cb-tiles-grid__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, auto);
}

.cb-tiles-grid__grid:has(:nth-child(5)) {
    grid-template-columns: repeat(4, 1fr);
}


.cb-tiles-grid__tile {
    --_cb-tiles-grid-tile-theme: gray;
    container: cb-tiles-grid-tile / inline-size;
    display: grid;
    position: relative;
    place-content: center;
    place-items: center;
    padding: clamp(1.25rem, 5cqw, 2rem) clamp(1.25rem, 5cqw, 6rem);
    color: white;

}

.cb-tiles-grid__tile * {
    color: inherit;
}

.cb-tiles-grid__tile:first-child {
    grid-column: 1 / span 2;
    grid-row: 1 / -1;
}

.cb-tiles-grid__tile::after {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--_cb-tiles-grid-tile-theme);
    z-index: -1;
}

.cb-tiles-grid__tile:has(.position-default)::after {
    opacity: .66;
    mix-blend-mode: multiply;
}

/* Themes */
.cb-tiles-grid__tile.t-default:first-child { --_cb-tiles-grid-tile-theme: linear-gradient(to bottom, #2487DA, #115DB3); }
.cb-tiles-grid__tile.t-default:nth-child(2) { --_cb-tiles-grid-tile-theme: #B2BBC1; }
.cb-tiles-grid__tile.t-default:nth-child(4) { --_cb-tiles-grid-tile-theme: #D2DBE2; }
.cb-tiles-grid__tile.t-default:nth-child(6) { --_cb-tiles-grid-tile-theme: #949DA3; }
.cb-tiles-grid__tile.t-default:nth-child(3) { --_cb-tiles-grid-tile-theme: #115DB3; }
.cb-tiles-grid__tile.t-default:nth-child(5) { --_cb-tiles-grid-tile-theme: #2487DA; }
.cb-tiles-grid__tile.t-default:nth-child(7) { --_cb-tiles-grid-tile-theme: #012F74; }

.cb-tiles-grid__tile:not(.t-default).t-gradient { --_cb-tiles-grid-tile-theme: linear-gradient(to bottom, #2487DA, #115DB3); }
.cb-tiles-grid__tile:not(.t-default).t-primary-dark { --_cb-tiles-grid-tile-theme: #012F74; }
.cb-tiles-grid__tile:not(.t-default).t-primary { --_cb-tiles-grid-tile-theme: #115DB3; }
.cb-tiles-grid__tile:not(.t-default).t-primary-light { --_cb-tiles-grid-tile-theme: #2487DA; }
.cb-tiles-grid__tile:not(.t-default).t-grey-dark { --_cb-tiles-grid-tile-theme: #949DA3; }
.cb-tiles-grid__tile:not(.t-default).t-grey { --_cb-tiles-grid-tile-theme: #B2BBC1; }
.cb-tiles-grid__tile:not(.t-default).t-grey-light { --_cb-tiles-grid-tile-theme: #D2DBE2; }

.cb-tiles-grid__img {
    max-width: 100%;
    height: auto;
}

.cb-tiles-grid__img:has(+ .cb-tiles-grid__text) {
    max-width: 100%;
    height: auto;
}

.cb-tiles-grid__img.position-default {
    position: absolute;
    z-index: -2;
    inset: 0;
    object-fit: cover;
    height: 100%;
    width: 100%;
}

.cb-tiles-grid__headline {
    margin-block: 1rem;
}

.cb-tiles-grid__headline:not(:has( + .cb-tiles-grid__body)) {
    margin-block-end: 0;
}

.cb-tiles-grid--layout1 .cb-tiles-grid__headline {
    font-size: clamp(1.25rem, 6cqw, 2rem);
}

.cb-tiles-grid--layout1 .cb-tiles-grid__tile:first-child .cb-tiles-grid__headline {
    font-size: clamp(1.25rem, 8cqw, 6rem);
}

.cb-tiles-grid--layout2 .cb-tiles-grid__headline {
    font-size: clamp(1.25rem, 4cqw, 2rem);
}

.cb-tiles-grid__body {
    font-size: clamp(1rem, 4cqw, 1.25rem);
}

.cb-tiles-grid__body * {
    max-width: fit-content;
}

.cb-tiles-grid--layout1 .cb-tiles-grid__tile:first-child .cb-tiles-grid__body {
    font-size: clamp(1.25rem, 3cqw, 2.5rem);
}


@container cb-tiles-grid (width < 64rem) {
    .cb-tiles-grid__grid {
        grid-template-columns: auto;
        grid-template-rows: auto;
    }

    .cb-tiles-grid__grid:has(:nth-child(5)) {
        grid-template-columns: auto;
        grid-template-rows: auto;
    }

    .cb-tiles-grid__tile:first-child {
        grid-column: 1;
        grid-row: 1;
    }
}

@container cb-tiles-grid (width < 32.5rem) {
    .cb-tiles-grid__grid {
        grid-template-columns: 1fr;
        grid-template-rows: auto;


    }

    .cb-tiles-grid__grid:has(:nth-child(5)) {
        grid-template-columns: 1fr;
        grid-template-rows: auto;
    }

}