.hero-image-video-modal {
    display: grid;
    padding-top: 200px;
    padding-bottom: 80px;

    .background-image {
        position: absolute;
        display: block;
        top: 0;
        width: 100%;
        height: 100%;

        .image {
            position: absolute;
            display: block;
            top: 0;
            width: 100%;
            height: 100%;

            .img {
                position: absolute;
                display: block;
                top: 0;
                width: 100%;
                height: 100%;
                object-fit: cover;
            }
        }
    }

    .container {
        z-index: 1;
        max-width: 1440px;
        display: grid;
        gap: clamp(2.778rem, 0.681rem + 10.484vi, 10rem);

        .headline {
            margin: 0;
            text-align: left;
            color: #FFF;
            font-family: "League Spartan";
            font-size: clamp(3.333rem, 2.688rem + 3.226vi, 5.556rem);
            font-style: normal;
            font-weight: 800;
            line-height: 1.1;
            text-transform: capitalize;
            max-width: 640px;
        }

        .bottom-wrapper {
            position: relative;
            display: grid;
            grid-template-columns: 1fr;
            gap: 60px;

            @media screen and (min-width: 768px) {
                grid-template-columns: 1fr 480px;
            }

            .text-wrapper {
                display: flex;
                flex-direction: column;
                gap: 40px;

                .line {
                    width: 100%;
                    height: 1px;
                    stroke: #FFF;
                    opacity: 0.25;
                    margin: 0;
                }

                .text {
                    color: #FFF;
                    font-family: Dosis;
                    font-size: 18px;
                    font-style: normal;
                    font-weight: 500;
                    line-height: 1.4;
                    text-transform: capitalize;
                    margin: 0;
                    max-width: 488px;
                }

                .button {
                    padding: 0;
                    align-self: flex-start;
                }
            }

            .video-wrapper {
                display: grid;
                padding: 10px;
                gap: 25px;
                grid-template-columns: 1fr 1fr;
                background-color: #fff;
                color: #000;
                align-items: center;
                height: fit-content;

                @media screen and (min-width: 768px) {
                    grid-template-columns: 259px 1fr;
                }

                .image-wrapper {
                    position: relative;

                    button {
                        position: absolute;
                        top: 50%;
                        left: 50%;
                        transform: translate(-50%, -50%);
                        background: transparent;
                    }
                }

                p {
                    color: #000;
                    font-family: "League Spartan";
                    font-size: 22px;
                    font-style: normal;
                    font-weight: 500;
                    line-height: 1.1;
                }
            }

            .icon-wrapper {
                position: absolute;
                left: 50%;
                transform: translateX(-50%);
                bottom: -70px;

                @media screen and (min-width: 1100px) {
                    bottom: 0;
                }

                button {
                    background: transparent;
                }
            }
        }
    }
}

.modal {
    &.is-active {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .close {
        top: 10%;
        right: 10%;
        position: absolute;
        color: white;
        z-index: 1200;
        text-shadow: none;

        span {
            font-weight: 400;
        }
    }

    .modal-backdrop {
        opacity: .5;
    }

    .modal-dialog {
        z-index: 10000;
        max-width: unset;

        .modal-content {
            background: transparent;
            border: none;

            .modal-body {
                width: 800px;
                height: 500px;
                padding: 0;
            }
        }
    }
}