div.article-slider {
    --paginatorButtonHeight: 40px;
    --paginatorButtonWidth: 50px;

    background-image: url("../../images/backgrounds/strong-e82e488be113995f1fd51c3197761939.png");
    padding: 44px 0;
    
    > div.wrapper {
        padding-left: 18px;
        padding-right: 18px;    
        position: relative;

        article.card {
            max-width: calc((var(--layoutWidth) / 4));
            width: 100%;
            margin-right: 18px;
        }
    }

    div.paginate {
        width: var(--paginatorButtonWidth);
        height: var(--paginatorButtonHeight);
        background-color: #6c757d;
        position: absolute;
        top: calc(50% - (var(--paginatorButtonHeight) / 2));
        display: flex;
        place-content: center;
        border-radius: calc(var(--paginatorButtonHeight) / 2);
        cursor: pointer;
        
        &:hover {
            background-color: #a49150;
        }

        svg {
            fill: white;
            width: 60%;
        }

        &.back {
            left: calc(0px - var(--paginatorButtonWidth));
        }

        &.forward {
            right: calc(0px - var(--paginatorButtonWidth));
        }
    }

    a.read-more {
        width: 300px;
        margin-top: 44px;
        margin-left: auto;
        margin-right: auto;
    }

    @media (max-width: 1420px) {
        --paginatorGap: 18px;

        div.paginate {
            top: calc(100% + var(--paginatorGap));

            &.back {
                left: calc(50% - var(--paginatorButtonWidth) - (var(--paginatorGap) / 2));
            }

            &.forward {
                right: calc(50% - var(--paginatorButtonWidth) - (var(--paginatorGap) / 2));
            }
        }

        a.read-more {
            margin-top: calc(44px + var(--paginatorButtonHeight));
            width: unset;
            margin-left: 18px;
            margin-right: 18px;
        }
    }
}

article.card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    max-width: 300px;
    box-shadow: 0 0 16px rgba(0, 0, 0, 0.1);

    img {
        width: 100%;
        aspect-ratio: 16/9;
        object-fit: cover;
    }

    div.content {
        flex: 1;
        padding: 14px;
        display: flex;
        flex-direction: column;
        gap: 22px;

        h2 {
            margin-top: 0;
            font-size: 1.6rem;
            text-transform: uppercase;
        }

        div.category {
            font-size: 0.8rem;
            background-color: #6c757d;
            border-radius: 4px;
            color: white;
            padding: 2px 6px;
            width: fit-content;
            font-weight: bold;
        }

        div.summary {
            flex: 1;
            font-size: 0.9rem;
        }
    }
}