.category-grid-block {
    display: flex;
    flex-direction: column;
    gap: var(--ovelia-spacing-step-6);
    padding-block: var(--ovelia-block-padding-block);
    color: var(--ovelia-colors-semantic-text-inverse);
    background-color: var(--block-bg-override, var(--ovelia-colors-semantic-surface));
    border-top:    var(--block-border-top, none);
    border-bottom: var(--block-border-bottom, none);
    max-width: var(--ovelia-layout-max-width);
    margin: 0 auto;
}

.cgb-card {
    position: relative;
    overflow: hidden;
    aspect-ratio: 3 / 4;
}

.cgb-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--cgb-bg, var(--ovelia-color-surface)) var(--cgb-focal, center) / cover no-repeat;
    transition: transform 0.6s ease;
    z-index: 0;
}

.cgb-card:hover::before {
    transform: scale(1.04);
}


.cgb-card .cgb-card__overlay {
    background: linear-gradient(to top, rgba(28, 25, 23, 0.8) 0%, rgba(28, 25, 23, 0.1) 75%, rgba(28, 25, 23, 0.0) 100%);
    opacity: 0.75;
    transition: opacity 0.6s ease;
}

.cgb-card:hover .cgb-card__overlay {
    opacity: 1;
}

.cgb-card__link {
    position: absolute;
    inset: 0;
    display: block;
    color: inherit;
    text-decoration: none;
    outline-offset: 2px;
}

.cgb-card__body {
    position: relative;
    width: 100%;
    height: 100%;
    padding: var(--ovelia-spacing-step-8) var(--ovelia-spacing-step-10);
    display: flex;
    flex-direction: column;
    justify-content: end;
    align-items: flex-start;
    gap: var(--ovelia-spacing-step-4);
    font-size: var(--ovelia-typography-fontsize-base);
}

.cgb-card__description {
    color: var(--ovelia-colors-powder-50);
    font-size: inherit;
    max-width: 20rem;
    margin: 0;
}

.cgb-card__cta {
    margin: 0;
    color: inherit;
    font-family: inherit;
    font-weight: inherit;
    letter-spacing: inherit;
    line-height: inherit;
    text-transform: uppercase;
    text-decoration: none;
    padding-bottom: var(--ovelia-spacing-step-2);
    border-bottom: 1px solid var(--ovelia-colors-powder-50);
    font-size: inherit;
}

.cgb-card__link:hover .cgb-card__cta,
.cgb-card__link:focus-visible .cgb-card__cta {
    color: var(--ovelia-colors-powder-50);
}

.cgb-card__overlay {
    position: absolute;
    inset: 0;
}

@media (min-width: 768px) {
    .category-grid-block {
        display: grid;
        padding-inline: var(--ovelia-layout-side-padding);
    }

    .cgb-card__body {
        padding: var(--ovelia-spacing-step-10);
    }

    /* 1 — single full-width landscape banner */
    .cgb--count-1 {
        grid-template-columns: 1fr;
    }
    .cgb--count-1 .cgb-card {
        aspect-ratio: 16 / 7;
    }

    /* 2 — two portrait columns */
    .cgb--count-2 {
        grid-template-columns: repeat(2, 1fr);
    }
    .cgb--count-2 .cgb-card {
        aspect-ratio: 3 / 4;
    }

    /* 3 — three portrait columns */
    .cgb--count-3 {
        grid-template-columns: repeat(3, 1fr);
    }
    .cgb--count-3 .cgb-card {
        aspect-ratio: 3 / 4;
    }

    /* 4 — two per row, two rows */
    .cgb--count-4 {
        grid-template-columns: repeat(2, 1fr);
    }
    .cgb--count-4 .cgb-card {
        aspect-ratio: 3 / 4;
    }

    /* 5 — asymmetric: slot 1 wide top-left, slot 2 portrait top-right, bottom row square */
    .cgb--count-5 {
        grid-template-columns: repeat(3, 1fr);
    }
    .cgb--count-5 .cgb-card--slot-1 {
        grid-column: span 2;
        aspect-ratio: unset; /* stretches to match slot 2's row height */
    }
    .cgb--count-5 .cgb-card--slot-2 {
        aspect-ratio: 3 / 4; /* portrait — drives top row height */
    }
    .cgb--count-5 .cgb-card--slot-3,
    .cgb--count-5 .cgb-card--slot-4,
    .cgb--count-5 .cgb-card--slot-5 {
        aspect-ratio: 1; /* square bottom row */
    }

    /* 6 — three per row, two rows */
    .cgb--count-6 {
        grid-template-columns: repeat(3, 1fr);
    }
    .cgb--count-6 .cgb-card {
        aspect-ratio: 3 / 4;
    }
}