.emotion {
    position: relative;
    /* min-height: 70vh; */
    display: grid;

    grid-template-columns: 4fr 75px 3fr;
    grid-template-rows: 20px auto 20px;

    /* overflow: hidden; */

    .background-img,
    .background-video {
        grid-column: 1 / span 2;
        grid-row: 1 / span 3;

        width: 100%;
        max-width: 1200px;
        /* height: 100%; */

        aspect-ratio: 16 / 9;

        background-position: center;
        background-size: cover;

        background-color: var(--light-blue);

        border-bottom-right-radius: var(--border-radius-xxl);
        border-top-left-radius: var(--border-radius-xxl);

        justify-self: right;
    }
    .background-video {
        object-fit: cover;
    }
    .mute-container {
        grid-column: 1 / span 2;
        grid-row: 1 / span 3;
        position: relative;
        max-width: 1200px;
        width: 100%;

        aspect-ratio: 16 / 9;

        justify-self: right;

        .video-unmute-icon,
        .video-mute-icon {
            position: absolute;
            bottom: 25px;
            right: 95px;
            color: var(--primary);
            font-size: 50px;
            cursor: pointer;
    
            &:hover {
                transform: scale(1.1);
            }
        }
    }
    .content {
        grid-column: 2 / span 2;
        grid-row: 2 / span 1;

        width: 80%;
        max-width: 670px;
        height: max-content;
        padding: var(--dist-60) var(--dist-50);

        text-align: center;
        color: var(--blue);

        box-shadow: var(--box-shadow-xl);

        will-change: transform;


        .text {
            /* max-width: 600px; */
            /* margin: 0 auto; */

            text-align: left;
        }

        .content-headline {
            text-transform: uppercase;
            color: var(--primary);
            font-size: 50px;
            font-weight: 600;

            margin-bottom: 40px;

        }

        .content-text {
            margin-bottom: 50px;
        }


    }
}


@media (max-width: 1100px) {
    .emotion {
        grid-template-columns: 1fr 2fr 200px;
        grid-template-rows: calc((100vw - 200px) * (9 / 16) - 100px) auto 20px;

        .content {
            width: 90%;
        }
    }
}

@media (max-width: 768px) {
    .emotion {
        grid-template-columns: 25px 1fr 25px;
        grid-template-rows: calc((100vw) * (9 / 16) - 75px) auto 0;


        .background-img,
        .background-video {
            grid-column: 1 / span 3;
            grid-row: 1 / span 2;
        }
        .mute-container {
            grid-column: 1 / span 3;
            grid-row: 1 / span 2;
            display: none;
        }
        .content {
            grid-column: 2 / span 1;
            grid-row: 2 / span 1;
            width: 100%;
        }
    }
}

@media (max-width: 576px) {
    .emotion {
        .content {
            .info-subeadline-l {
                font-size: var(--fs-headline);
            }
            .content-headline {
                font-size: 40px;
                margin-bottom: 20px !important;
            }
            .content-text {
                margin-bottom: 30px !important;
            }
            .button {
                padding: var(--dist-20) var(--dist-20);
            }
        }
    }
}