.callout {

    position: relative;
    padding: var(--space-lg) 2.5%;
    overflow: hidden;
}

    @media (min-width: 600px) {.callout {
        padding: var(--space-xxl) 2.5%
}
    }

    @media (min-width: 1025px) {.callout {
        max-width: 1366px;
        min-height: 765px;
        margin: 0 auto;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0
}
    }

    .callout svg {
        position: absolute;
        
    }

    .callout .callout-item--text {
            position: relative;
            z-index: 2;
            text-align: center;
            background-color: var(--color);
            padding: var(--space-md) var(--space-md);
            max-width: 100ch;


        }

    @media (min-width: 600px) {

    .callout .callout-item--text {
                padding: var(--space-xl) var(--space-xl) var(--space-lg)


        }

            }

    .callout .callout-item--text h2 {
                color: hsl(var(--body-text-color));
                max-width: 75%;
                margin: 0 auto;
                font-size: var(--step-1);
                margin-bottom: var(--space-md);
                
            }

    @media (min-width: 600px) {

    .callout .callout-item--text h2 {
                    font-size: var(--step-2)
                
            }

                }

    .callout .callout-item--text h3 {
                color: hsl(var(--body-text-color));
            }

    .callout .callout-item--text p {
                color: hsl(var(--body-text-color));
                margin: 0 auto;
                margin-bottom: var(--space-md);
                font-weight: var(--regular-weight);
            }

    .callout .callout-item--text p a {
                    color: hsl(var(--body-text-color));
                }

    @media (min-width: 600px) {
                    
                }

    .callout .callout-item--text .link--button {
                background-color: transparent;
                color: hsl(var(--body-text-color));
                border: 1px solid hsl(var(--body-text-color));
            }

    .callout .callout-item--text .link--button:hover, .callout .callout-item--text .link--button:focus {
                    background-color: hsla(var(--body-text-color), 10%);
                }

    .callout .callout-item--image {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            overflow: hidden;
            z-index: 0;
            aspect-ratio: 16/9;
        }

    .callout .callout-item--image img {
                -o-object-fit: cover;
                   object-fit: cover;
                width: 100%;
                height: auto;
            }

    .callout .callout-item--deco {
            background: var(--color);
            width: 100%;
            position: absolute;
            left: 0;
            clip-path: url(#calloutMask);
            height: 40px;
            bottom: -38px;
        }



.layout--twocol-section--50-50 {

    flex-direction: column;
}



@media (min-width: 1025px) {



.layout--twocol-section--50-50 {
        flex-direction: row
}
    }



.layout--twocol-section--50-50 .layout__region {
        padding: .25em;
        box-sizing: border-box;
        flex: 1 0 100%;
    }



@media (min-width: 1025px) {



.layout--twocol-section--50-50 .layout__region {
            flex: 1 0 50%
    }
        }



.layout--twocol-section--50-50 .callout {
        min-height: 500px;
        margin: var(--space-md) var(--space-zero);
        display: flex;
        align-items: center;
        justify-content: center;
    }



@media (min-width: 1025px) {



.layout--twocol-section--50-50 .callout {
            min-height: 100%;
            margin: var(--space-xl) var(--space-zero)
    }
        }



.layout--twocol-section--50-50 .callout .callout-item--image {
            aspect-ratio: unset;
        }



.layout--twocol-section--50-50 .callout .callout-item--image img {
                min-height: 100%;
                width: auto;
                min-width: 100%;
                position: absolute;
            }