.wp-block-banner {

    .inner-container {
        width: var(--desktop-container-width);
        margin: 0 auto;
    }

    .banner-container {
        display: block;
        position: relative;
        width: 100%;
        border-radius: var(--mobile-border-radius);

        @media (min-width: 768px) {
            border-radius: var(--desktop-border-radius);
        }

        img {
            position: absolute;
            z-index: 1;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
            border-radius: var(--mobile-border-radius);

            @media (min-width: 768px) {
                border-radius: var(--desktop-border-radius);
            }

            &.greyscale {
                filter: grayscale(1);
            }
        }

        .overlay {
            position: absolute;
            z-index: 3;
            left: 0;
            top: 0;
            width: 100%;
            background: linear-gradient(0deg, rgba(71, 80, 92, 0.20) 0%, rgba(71, 80, 92, 0.20) 100%);
            border-radius: var(--mobile-border-radius);

            @media (min-width: 768px) {
                border-radius: var(--desktop-border-radius);
            }
        }
    }

    &.standard {

        .banner-container {
            aspect-ratio: 1.26;

            @media (min-width: 768px) {
                aspect-ratio: 1.8;
            }

            img,
            .overlay {
                aspect-ratio: 1.26;

                @media (min-width: 768px) {
                    aspect-ratio: 1.8;
                }
            }

            .headline-container {
                position: absolute;
                z-index: 5;
                left: 21px;
                bottom: 22px;
                width: 60%;

                @media (min-width: 768px) {
                    left: 65px;
                    bottom: 63px;
                    width: 45%;
                }

                .headline {
                    color: #fff;
                    font-family: "Museo Sans";
                    font-size: 1.5rem;
                    font-style: normal;
                    font-weight: 600;
                    line-height: 107%;
                    transition: all 200ms ease-in;

                    @media (min-width: 500px) {
                        font-size: 1.75rem;
                    }

                    @media (min-width: 768px) {
                        font-size: 2.8125rem;
                    }
                }

                .link-label {
                    margin-top: 30px;
                    color: #FFF;
                    font-family: "Museo Sans";
                    font-size: 1.25rem;
                    font-style: normal;
                    font-weight: 400;
                    line-height: 120%;
                    transition: all 200ms ease-in;
                }
            } /* headline-container */
        } /* banner-container */

        a.banner-container:hover {

            .headline-container .headline,
            .link-label {
                color: var(--yellow);
            }
        }
    } /* standard */

    &.callout,
    &.chart {

        .banner-container {
            aspect-ratio: 0.86;

            @media (min-width: 1024px) {
                aspect-ratio: 2.06;
            }

            img,
            .overlay {
                aspect-ratio: 0.86;

                @media (min-width: 1024px) {
                    aspect-ratio: 2.06;
                }
            }

            .headline-container {
                position: relative;
                z-index: 5;
                display: flex;
                flex-direction: column;
                justify-content: space-between;
                width: 90%;
                padding: 31px 0 31px 5%;

                @media (min-width: 1024px) {
                    padding: 63px 0 31px 5%;
                    width: 70%;
                    height: 100%;
                }

                .row {
                    display: flex;
                    gap: 29px;

                    @media (min-width: 1024px) {
                        gap: 20px;
                    }

                    &.callout-row {
                        align-items: flex-start;
                    }
                }

                .callout {
                    color: var(--yellow);
                    font-family: "Museo Sans";
                    font-size: 1.25rem;
                    font-style: normal;
                    font-weight: 600;
                    line-height: 125%;

                    @media (min-width: 1024px) {
                        font-size: 2.1875rem;
                    }
                }

                .headline {
                    color: #FFF;
                    font-family: "Museo Sans";
                    font-size: 1.25rem;
                    font-style: normal;
                    font-weight: 400;
                    line-height: 120%;
                    transition: all 200ms ease-in;

                    @media (min-width: 768px) {
                        font-size: 2.4375rem;
                    }
                }

                .link-label {
                    margin-top: 24px;
                    color: #F8F87C;
                    font-family: "Museo Sans";
                    font-size: 0.875rem;
                    font-style: normal;
                    font-weight: 400;
                    line-height: 120%;
                    transition: all 200ms ease-in;

                    @media (min-width: 768px) {
                        font-size: 1.25rem;
                    }
                }
            } /* headline-container */
        } /* banner-container */

        a.banner-container:hover {

            .headline-container {

                .headline,
                .link-label {
                    color: var(--yellow);
                }
            }
        }
    } /* callout */

    &.text {

        .banner-container {

            .headline-container {
                position: relative;
                z-index: 5;
                padding: 63px 5%;
                display: flex;
                gap: 20px;

                .headline-link-container {
                    width: 70%;
                }

                .headline {
                    color: #FFF;
                    font-family: "Museo Sans";
                    font-size: 1.5rem;
                    font-style: normal;
                    font-weight: 400;
                    line-height: 120%;
                    transition: all 200ms ease-in;

                    @media (min-width: 768px) {
                        font-size: 2.4375rem;
                    }
                }

                .link-label {
                    margin-top: 22px;
                    color: #FFF;
                    font-family: "Museo Sans";
                    font-size: 1.25rem;
                    font-style: normal;
                    font-weight: 400;
                    line-height: 120%;
                    transition: all 200ms ease-in;
                }
            } /* headline-container */
        } /* banner-container */

        a.banner-container:hover {

            .headline-container {

                .headline,
                .link-label {
                    color: var(--yellow);
                }
            }
        }
    } /* text */

    &.chart {

        .inner-container {
            width: 100%;
        }

        .banner-container {
            aspect-ratio: auto;
            border-radius: 0;
            padding: 39px 0;
            display: flex;
            flex-direction: column-reverse;
            justify-content: center;
            align-items: center;

            @media (min-width: 1024px) {
                padding: 58px 0;
                flex-direction: row;
                justify-content: space-between;
            }

            .headline-container {
                position: relative;
                z-index: 5;
                left: auto;
                bottom: auto;
                width: 84%;
                justify-content: normal;

                @media (min-width: 1024px) {
                    width: 40%;
                    padding: 0 8% 0 0;
                }

                .headline {
                    margin-top: 38px;

                    @media (min-width: 1024px) {
                        margin-top: 142px;
                    }
                }

                .link-label {
                    color: #fff;
                }
            }

            img {
                position: relative;
                left: auto;
                right: auto;
                top: auto;
                width: 84%;
                height: auto;
                object-fit: contain;

                @media (min-width: 1024px) {
                    width: 58%;
                    height: 100%;
                }

                &.greyscale {
                    filter: grayscale(1);
                }
            }
        }

        &.chart-pos-right {

            .banner-container {

                @media (min-width: 1024px) {
                    flex-direction: row-reverse;
                }

                .headline-container {
                    padding: 0 0 0 8%;
                }
            }
        }
    } /* .chart */
}