.main {
    .wrapper {
        display: block;

        .news__archive {
            display: flex;
            flex-direction: column;
            gap: 20px;
            margin: 2rem 0;

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

                .thumbnail {
                    flex: 30% 0 0;
                    display: flex;
                    align-items: center;

                    img {
                        height: 195px;
                        width: 100%;
                    }

                    svg {
                        height: 195px;
                        width: 100%;
                        background-color: #f9b400;
                        border-radius: 5px;
                    }
                }

                .info {
                    flex: 65% 0 0;

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

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

                    .title {
                        font-size: 1.6rem;
                    }

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

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

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

                    .more {
                        display: flex;
                        flex-direction: row;
                        justify-content: flex-end;
                        padding: 10px;
                        font-size: 1.33rem;
                        font-weight: 400;
                    }
                }
            }

            .banner__tablet-black,
            .banner__tablet-yellow {
                order: unset;
            }
        }

        aside.sidebar-archive {
            display: grid;
            grid-template-columns: 1fr;
            justify-content: center;
            gap: 1rem;
            margin: 0 0 1rem 0;
            order: unset;

            .news__preview {

                width: auto;
                height: 256px;
                grid-column: auto;

                .title {
                    font-size: 1rem;
                }

                .thumbnail img {
                    height: 200px;
                    width: 100%;
                    object-fit: cover;
                    border-radius: 5px;
                }
            }

            .banner__side-black {
                grid-column: 1;
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;
                height: 532px;
                background-color: #000000;

                img {
                    width: auto;
                    height: 512px;
                }
            }
        }

        .load-more__wrapper {
            display: flex;
            flex-direction: row;
            justify-content: flex-end;

            button {
                width: 100%;
            }
        }
    }
}

@media screen and (min-width: 531px) {
    .main {
        .wrapper {
            width: 512px;

            aside.sidebar-archive {
                grid-template-columns: 1fr 1fr;

                .banner__side-black {
                    grid-column: 2;
                }
            }
        }
    }
}

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

            .news__archive {
                article.news__preview {

                    .thumbnail {
                        display: flex;
                        align-items: center;

                        img {
                            height: 195px;
                            width: 100%;
                            min-width: 195px;
                        }

                        svg {
                            height: 195px;
                            width: 100%;
                            min-width: 195px;
                            background-color: #f9b400;
                            border-radius: 5px;
                        }
                    }
                }
            }
        }
    }
}

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

            .news__archive {
                grid-area: main;
            }

            .latest-news__title {
                display: none;
            }

            aside.sidebar-archive {
                grid-area: sidebar;
                display: block;

                h2 {
                    display: none;
                }

                .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;
            }

            .load-more__wrapper {
                button {
                    width: auto;
                }
            }
        }
    }
}

@media screen and (min-width: 1439px) {

    .main {
        .wrapper {
            width: 1240px;

            article.news__preview {
                .info {
                    .misc {
                        font-size: 1.5rem;
                    }
                }
            }
        }
    }
}