:root {
    /* Parent */
    --cb-call-to-action-gap: 1rem;
    --cb-call-to-action-radius: 1rem;
    --cb-call-to-action-bg-color: lightgrey;

    /* Content */
    --cb-call-to-action-content-padding: 1rem;

    /* More Button */
    --cb-call-to-action-btn-padding-top: 1rem;
    --cb-call-to-action-btn-padding-right: 1rem;
    --cb-call-to-action-btn-padding-bottom: 1rem;
    --cb-call-to-action-btn-padding-left: 1rem;

    --cb-call-to-action-btn-color: white;
    --cb-call-to-action-btn-color-hover: white;
    --cb-call-to-action-btn-bg-color: #444;
    --cb-call-to-action-btn-bg-color-hover: black;

    --cb-call-to-action-btn-radius: 1rem;
}

.cb-call-to-action {
    container: cb-call-to-action / inline-size;
}

.cb-call-to-action__wrapper {
    display: grid;
    align-items: center;

    column-gap: var(--cb-call-to-action-gap);
    border-radius: var(--cb-call-to-action-radius);
    overflow: clip;
    background: var(--cb-call-to-action-bg-color);
}

.cb-call-to-action__wrapper:has(> :where(picture, et-copyright):first-child) {
    grid-template-columns:
        [img-start] 400px
        [img-end content-start] 1fr
        [content-end]
        ;
    padding-inline-end: var(--cb-call-to-action-content-padding);
}

.cb-call-to-action__wrapper:has(> :where(picture, et-copyright):last-child) {
    grid-template-columns:
        [content-start] 1fr
        [content-end img-start] 400px [img-end]
    ;
}

:where(picture, et-copyright):has(.cb-call-to-action__img) {
    grid-area: img;
    align-self: stretch;
}
.cb-call-to-action__img {
    display: block;
    object-fit: cover;
    height: 100%;
}

.cb-call-to-action__img[src$=".svg"] {
  object-fit: contain;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}

.cb-call-to-action__content {
    grid-area: content;
    hyphens: auto;
    padding: var(--cb-call-to-action-content-padding);
}
.cb-call-to-action__content * {
    margin: 0;
}


.cb-call-to-action__btn {
    --cb-call-to-action-btn-padding:
        var(--cb-call-to-action-btn-padding-top)
        var(--cb-call-to-action-btn-padding-right)
        var(--cb-call-to-action-btn-padding-bottom)
        var(--cb-call-to-action-btn-padding-left)
    ;
    text-decoration: none;
    padding: var(--cb-call-to-action-btn-padding);
    color: var(--cb-call-to-action-btn-color);
    background: var(--cb-call-to-action-btn-bg-color);
    border-radius: var(--cb-call-to-action-btn-radius);
}

.cb-call-to-action__btn:hover {
    color: var(--cb-call-to-action-btn-color-hover);
    background: var(--cb-call-to-action-btn-bg-color-hover);
}

@container cb-call-to-action (width < 900px) {
    .cb-call-to-action__wrapper {
        grid-template-rows: 1fr;
    }
    .cb-call-to-action__wrapper:has(> :where(picture, et-copyright):first-child) {
        padding-inline-end: 0;
        grid-template-areas:
            'img content'
        ;
        grid-template-columns: auto minmax(65%, 1fr);
    }
    .cb-call-to-action__wrapper:has(> :where(picture, et-copyright):last-child) {
        grid-template-areas:
            'content img'
        ;
        grid-template-columns: minmax(65%, 1fr) auto;
    }
    .cb-call-to-action__btn {
        margin-bottom: 2rem;
    }
}

@container cb-call-to-action (width <= 500px) {
    .cb-call-to-action__wrapper:has(> :where(picture, et-copyright):first-child),
    .cb-call-to-action__wrapper:has(> :where(picture, et-copyright):last-child) {
        grid-template-columns: 1fr;
        grid-template-rows: repeat(3, auto);
        grid-template-areas:
            'img'
            'content'
        ;
    }
    .cb-call-to-action__wrapper :where(picture, et-copyright):has(.cb-call-to-action__img) {
        max-width: 100%;
    }
    .cb-call-to-action__img {
        display: block;
        width: 100%;
        height: auto;
    }
    .cb-call-to-action__btn {
        margin-block-end: var(--cb-call-to-action-content-padding);
    }
}