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

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

    /* overflow: hidden; */

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

        width: 100%;
        height: 100%;

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

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

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

        justify-self: right;
    }
    .content {
        grid-column: 2 / span 2;
        grid-row: 2 / span 2;

        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;

        }


    }
}

.news-detail-category {
    font-size: var(--fs-headline-l);
    text-transform: uppercase;
    color: var(--blue);
}
.container .news-detail {
    max-width: 950px;
    margin: 6rem 0;

    h2, h3 {
        margin-top: 40px;
        margin-bottom: 15px;
    }
}

@media (max-width: 1100px) {
    h1, h2 {
        font-size: var(--fs-headline-l) !important;
    }
    .article{
        .news-category-menu {
            align-items: flex-start;
        }
        .emotion {
            grid-template-columns: 1fr 2fr 200px;
            grid-template-rows: 50px auto 20px;
    
            .content {
                width: 90%;

                .news-detail-category{
                    font-size: var(--fs-headline);
                }
                .info-headline-xl{
                    font-size: var(--fs-headline-l);
                }
                .font-size-body-xl{
                    font-size: var(--fs-body-l);
                }
            }
        }

        .news-detail.font-size-body-xl{
            font-size: var(--fs-body-l);
        }
    }
}

@media (max-width: 768px) {
    .article{

        .emotion {
            grid-template-columns: 25px auto 25px;
            grid-template-rows: calc((100vw) * (9 / 16) - 75px) auto 0;

            .content{
                .info-headline-xl{
                    font-size: var(--fs-headline-l);
                }
            }

            .background-img {
                grid-column: 1 / span 3;
                grid-row: 1 / span 2;
            }
            .content {
                grid-column: 2 / span 1;
                grid-row: 2 / span 1;
                width: 100%;
            }
        }
    }
}
@media (max-width: 576px) {
    .article{
        .emotion {
            .content{
                .news-detail-category{
                    font-size: var(--fs-body-l);
                }
                .info-headline-xl{
                    font-size: var(--fs-headline);
                }
                .font-size-body-xl{
                    font-size: var(--fs-body-l);
                }
            }
        }
    }
}