body {
    main {
        #news {
            padding: 2.5% 1%;

            #news-repeater {
                width: 100%;
                margin: 2.5% 0;
                overflow-x: scroll;
                overflow-y: hidden;
                display: flex;
                scroll-snap-type: x mandatory;
                scroll-behavior: smooth;

                &::-webkit-scrollbar {
                    display: none;
                }

                .news-article {
                    aspect-ratio: 6/7;
                    flex-shrink: 0;
                    flex-grow: 0;
                    margin: 0 .5%;
                    width: 22%;
                    position: relative;

                    h1, h2, h3, h4 {
                        color: var(--titles-secondary);
                    }

                    p {
                        color: var(--paragraph-secondary);
                    }

                    figure {
                        position: absolute;
                        top: 0;
                        left: 0;
                        width: 100%;
                        height: 100%;

                        img {
                            width: 100%;
                            height: 100%;
                            object-fit: cover;
                        }
                    }

                    .tag {
                        position: absolute;
                        top: 2.5%;
                        left: 2.5%;
                        padding: 2% 3.5%;
                        border-radius: 25px;

                        p {
                            font-size: 1.15em;
                        }
                    }

                    .figcaption {
                        position: absolute;
                        top: 100%;
                        left: 0;
                        width: 100%;
                        height: 100%;
                        transition: .5s ease;
                        padding: 5% 3%;
                        display: flex;
                        flex-direction: column;
                        justify-content: space-between;

                        h3 {
                            margin-bottom: 5%;
                        }

                        .article-button {
                            display: flex;
                            justify-content: space-between;
                            align-items: center;

                            .article-date {
                                opacity: .75;
                            }
                        }
                    }

                    &:hover {
                        .figcaption {
                            top: 0;
                        }
                    }

                    @media screen and (max-width: 1200px) {
                        width: 28%;
                    }

                    @media screen and (max-width: 979px) {
                        width: 36%;
                    }

                    @media screen and (max-width: 767px) {
                        .article-text {
                            p {
                                display: none;
                            }
                        }
                    }

                    @media screen and (max-width: 480px) {
                        width: 75%;
                        margin: 0 1.5%;
                        aspect-ratio: 3/4;

                        .figcaption {
                            top: initial;
                            bottom: 0;
                            height: fit-content;

                            .article-button {
                                flex-direction: row-reverse;
                                justify-content: space-between;
                            }
                        }

                        &:hover {
                            .figcaption {
                                top: initial;
                                bottom: 0;
                            }
                        }
                    }
                }

                :first-child {
                    margin-left: 0;
                }

                :last-child {
                    margin-right: 0;
                }
            }

            #news-repeater-controls {
                width: 90%;
                justify-self: center;
                display: flex;
                justify-content: space-between;
                align-items: center;

                #news-control-previous,
                #news-control-next {
                    aspect-ratio: 1/1;
                    width: 4%;
                    display: flex;
                    justify-content: center;
                    align-items: center;

                    img {
                        aspect-ratio: 1/1;
                        width: 90%;
                        opacity: .5;
                        transition: .25s ease;
                    }

                    &:hover {
                        cursor: pointer;

                        img {
                            opacity: 1;
                        }
                    }
                }

                #news-control-line {
                    width: 90%;

                    #inner-line {
                        min-height: .75dvh;
                        border-radius: 25px;
                        background-color: var(--background-secondary);
                        opacity: .5;
                    }
                }

                @media screen and (max-width: 1200px) {
                    #news-control-previous,
                    #news-control-next {
                        width: 5%;
                    }

                    #news-control-line {
                        width: 88%;
                    }
                }

                @media screen and (max-width: 979px) {
                    #news-control-previous,
                    #news-control-next {
                        width: 6%;
                    }

                    #news-control-line {
                        width: 85%;

                        #inner-line {
                            min-height: .75dvw;
                        }
                    }
                }

                @media screen and (max-width: 767px) {
                    width: 98%;

                    #news-control-previous,
                    #news-control-next {
                        width: 7%;
                    }
                }

                @media screen and (max-width: 480px) {
                    margin-top: 2%;

                    #news-control-previous,
                    #news-control-next {
                        width: 10%;
                    }

                    #news-control-line {
                        width: 75%;
                    }
                }
            }
        }
    }
}