:root {
    --banner-title-size: clamp(2.4rem, 2vw, 3.2rem);
}

.banner_component__container {
    position: relative;
    width: 100%;
    height: fit-content;
    margin-top: var(--padding-block);
    margin-bottom: clamp(50px, 10vw, 80px);
    

    .banner_component__content {
        text-decoration: none;

        .banner_component__image {
            overflow: hidden;
            display: flex;

            .banner_mobile {
                object-fit: cover;
                width: 100%;

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

            .banner_desktop {
                display: none;

                @media screen and (min-width: 768px) {
                    display: block;
                    width: 100%;
                    height: 100%;
                }
            }
        }
    }
}