.main {
    .wrapper {
        display: block;

        .s-news {
            margin: 2rem 0;

            article.news__preview {
                display: flex;
                flex-direction: row;
                flex-wrap: nowrap;
                height: auto;

                .thumbnail {
                    flex: 30% 0 0;

                    img {
                        height: 195px;
                    }
                }

                .info {
                    flex: 65% 0 0;
                }

                .misc {
                    color: var(--misc-color);
                    line-height: 2rem;

                    a {
                        color: var(--misc-color);
                        text-decoration: none;
                    }
                }

                .intro {
                    line-height: 1.4rem;
                    margin: 0 0 1rem 0;

                    &::after {
                        display: inline-block;
                        content: '...';
                        height: 1.4rem;
                        width: fit-content;
                    }
                }

                .more {
                    display: flex;
                    flex-direction: row;
                    justify-content: flex-end;
                }
            }

            .banner__tablet-black, .banner__tablet-yellow {
                padding: 1rem 0;
            }
        }


        .sidebar-category {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 1rem;
            margin: 0 0 1rem 0;

            .news__preview {
                .title {
                    font-size: 1rem;
                }
            }

            .banner__side-black img {
                height: 580px;
            }

            .banner__side-black, .banner__side-yellow {
                grid-area: auto;
            }
        }
    }
}

@media screen and (min-width: 719px) {
    .main {
        .wrapper {
            display: block;

            .s-news {
                article.news__preview {

                    .thumbnail {
                        img {
                            height: 195px;
                        }
                    }
                }
            }
        }
    }
}

@media screen and (min-width: 959px) {
    .main {
        .wrapper {
            display: grid;
            grid-template-areas:
                "topbanner topbanner"
                "main sidebar"
                "bottombanner bottombanner";

            .s-news {
                grid-area: main;
            }

            .sidebar-category {
                grid-area: sidebar;
                display: block;

                .news__preview {
                    height: auto;

                    .title {
                        font-size: 1.2rem;
                    }

                    .thumbnail img {
                        height: 190px;
                    }
                }
            }

            .banner__desktop-black {
                grid-area: topbanner;
            }

            .banner__desktop-yellow {
                grid-area: bottombanner;
            }

            .banner__tablet-black {
                grid-area: none;
            }

            .banner__tablet-yellow {
                grid-area: none;
            }

            .banner__side-black {
                grid-area: none;
                margin: 0 0 1rem 0;
            }

            .banner__side-yellow {
                grid-area: none;
                margin: 1rem 0 0 0;
            }
        }
    }
}