:root {
    --cb-hero-padding: 3rem;
    --cb-hero-border-radius: 1rem;
    --cb-hero-area-left-width: 33.33%;
    --cb-hero-area-center-width: 33.33%;
    --cb-hero-area-right-width: 33.33%;

    --cb-hero-box-padding: 1rem;
    --cb-hero-box-bg: #fff;
    --cb-hero-box-shadow-position: 0 0;
    --cb-hero-box-shadow-blur: 30px;
    --cb-hero-box-shadow-color-rbg: 25 25 25;
    --cb-hero-box-shadow-opacity: .66;
    --cb-hero-box-border-radius: var(--cb-hero-border-radius);
}

.cb-hero {
    container: cb-hero / inline-size;
}

.cb-hero__grid {
    display: grid;
    position: relative;
    grid-template-rows: [hero-img-start] var(--cb-hero-padding) [hero-content-start] min-content [hero-content-end] var(--cb-hero-padding) [hero-img-end];
    grid-template-columns:
        [hero-img-start]
            var(--cb-hero-padding)
            [hero-left-start]
                minmax(auto, var(--cb-hero-area-left-width))
            [hero-left-end hero-center-start]
                minmax(auto, var(--cb-hero-area-center-width))
            [hero-center-end hero-right-start]
                minmax(auto, var(--cb-hero-area-right-width))
            [hero-right-end]
            var(--cb-hero-padding)
        [hero-img-end]
    ;

    et-copyright {
        position: absolute;
        grid-area: hero-img;
        width: 100%;
        height: 100%;
    }
}
.cb-hero__grid:has(> .is-left) {
    --cb-hero-area-left-width: 40%;
    --cb-hero-area-center-width: 30%;
    --cb-hero-area-right-width: 30%;
}
.cb-hero__grid:has(> .is-right) {
    --cb-hero-area-left-width: 30%;
    --cb-hero-area-center-width: 30%;
    --cb-hero-area-right-width: 40%;
}
.cb-hero__grid:has(> .is-center) {
    --cb-hero-area-left-width: 30%;
    --cb-hero-area-center-width: 40%;
    --cb-hero-area-right-width: 30%;
}

.cb-hero__img {
    position: absolute;
    grid-area: hero-img;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: var(--cb-hero-border-radius);
}

.cb-hero__box {
    --cb-hero-box-shadow: var(--cb-hero-box-shadow-position) var(--cb-hero-box-shadow-blur) rgb(var(--cb-hero-box-shadow-color-rbg) / var(--cb-hero-box-shadow-opacity));
    z-index: 1;
    grid-row: hero-content;
    background: var(--cb-hero-box-bg);
    border-radius: var(--cb-hero-box-border-radius);
    padding: var(--cb-hero-box-padding);
    box-shadow: var(--cb-hero-box-shadow);
}
.cb-hero__box.is-left {
    grid-column: hero-left;

    @container cb-hero (width < 45rem) {
        grid-column-end: hero-center-end;
    }
    @container cb-hero (width < 35rem) {
        grid-column: hero-left / hero-right;
    }

}
.cb-hero__box.is-right {
    grid-column: hero-right;

    @container cb-hero (width < 45rem) {
        grid-column-start: hero-center;
    }
    @container cb-hero (width < 35rem) {
        grid-column: hero-left / hero-right;
    }
}
.cb-hero__box.is-center {
    grid-column: hero-center;

    @container cb-hero (width < 45rem) {
        grid-column: hero-left / hero-center;
    }
    @container cb-hero (width < 35rem) {
        grid-column: hero-left / hero-right;
    }
}