.banner-content-metafields {
    padding-block: clamp(20px, 5vw, 40px);
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-height: fit-content;


    .banner-content-metafields__container {
        position: relative;
        max-width: 90vw;
        margin-inline: auto;
        width: 100%;
        height: 550px;

        @media screen and (min-width: 500px) {
            height: 580px;

            @media screen and (min-width: 768px) {
                height: 380px;

                @media screen and (min-width: 1024px) {
                    height: 380px;

                    @media screen and (min-width: 1300px) {
                        max-width: 1200px;
                    }
                }
            }
        }

        .banner-content-metafields__image {
            width: 100%;
            height: 100%;
            border-radius: 20px;
            overflow: hidden;

            :is(img) {
                width: 100%;
                height: 100%;
                object-fit: cover;
            }

            .desktop-image {
                display: none;

                @media (min-width: 768px) {
                    display: block;
                }
            }

            .mobile-image {
                display: block;

                @media (min-width: 768px) {
                    display: none;
                }
            }
        }

        .banner-content-metafields__content {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 1;
            padding: 48px 24px;
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            justify-content: flex-start;

            @media screen and (min-width: 768px) {
                padding: 48px 6%;
                justify-content: center;
            }

            :is(h1) {
                font-size: clamp(32px, 5vw, 40px);
                font-weight: 700;
                color: #fff;
                margin-bottom: 20px;
            }

            :is(p) {
                font-size: clamp(14px, 5vw, 16px);
                font-weight: 400;
                color: #fff;
                margin-bottom: 20px;
                max-width: 415px;
            }


            :is(a) {
                display: inline-flex;
                font-size: clamp(14px, 5vw, 16px);
                font-weight: 600;
                color: #000;
                margin-bottom: 20px;
                background-color: #E2EB30;
                padding: 1.6rem 3.2rem;
                border-radius: 30px;
                text-decoration: none;
                transition: all 0.3s ease;
            }

        }
    }
}