/* #region: Global */
    .single .date {
        font-size: 14px;
        color: var(--color-bg-dark-alt);
        padding-bottom: 5px;
    }
    .single .read-more {
        display: inline-block;
        margin-top: 15px;
        padding: 5px 10px;
        border: 1px solid var(--color-gray-light);
        color: var(--color-bg-dark-alt);
        font-size: 12px;
        cursor: pointer;
        transition: all 0.3s;
        &:hover {
            background-color: var(--color-gray-light);
            color: var(--color-black);
            transition: all 0.3s;
        }
    }
/* #endregion */

/* #region: Articles */
    .articles .section-2 .single {
        align-items: center;
        margin-bottom: 50px;
        &:last-child {
            margin-bottom: 0;
        }
    }
    .articles .section-2 .single .right {
        padding-left: 40px;
    }
    .articles .section-2 .single .image {
        width: 100%;
        height: 300px;
        object-fit: cover;
        border-radius: 8px;
    }
    
    .articles .section-2 .pagination {
        margin-bottom: 0;
    }
    .articles .section-2 .small {
        font-size: 13px;
        color: var(--color-gray);
    }
    .articles .section-2 .pagination .active>.page-link, .articles .section-2 .pagination .page-link.active {
        color: var(--color-white);
        background-color: var(--color-primary-dark);
        border-color: var(--color-black);
    }
    .articles .section-2 .pagination .page-link {
        color: var(--color-bg-dark-alt);
        border: 1px solid var(--color-gray-light);
        font-size: 12px;
        padding: 5px 10px;
    }
    .articles .section-2 .pagination .page-item:first-child .page-link, .articles .section-2 .pagination .page-item:last-child .page-link {
        border-radius: 0;
    }
    .articles .section-2 .pagination .page-link:focus {
        box-shadow: none;
    }
    .articles .section-2 .pagination .page-link:hover {
        color: var(--color-white);
        background-color: var(--color-primary);
    }
/* #endregion */


/* #region: Article */
    .article .section-1 .title {
        font-size: 30px;
        font-weight: 600;
        color: var(--color-bg-dark);
        line-height: 40px;
        margin-bottom: 10px !important;
    }
    .article .section-1 .details {
        font-size: 16px;
        color: var(--color-bg-dark-alt);
    }
    .article .section-1 .details .line {
        margin: 0 5px;
    }
    .article .section-1 .right {
        gap: 10px;
        display: flex;
        justify-content: end;
    }
    .article .section-1 .right .icon {
        font-size: 20px;
        cursor: pointer;
        color: var(--color-bg-dark-alt);
        &:hover {
            color: var(--color-primary-dark);
        }
    }

    .article .section-2 .image {
        width: 100%;
        height: 450px;
        object-fit: cover;
        margin-bottom: 30px;
        border-radius: 8px;
    }

    .article .section-3 .single .image {
        width: 100%;
        height: 250px;
        object-fit: cover;
        border-radius: 8px;
        margin-bottom: 10px;
    }
/* #endregion */


/* #region: Responsive */
    @media (width < 1921px) {}
    @media (width < 1901px) {}
    @media (width < 1851px) {}
    @media (width < 1801px) {}
    @media (width < 1751px) {}
    @media (width < 1681px) {}
    @media (width < 1601px) {}
    @media (width < 1537px) {}
    @media (width < 1441px) {}
    @media (width < 1367px) {}
    @media (width < 1301px) {}
    @media (width < 1281px) {
        .articles .section-2 .single {
            margin-bottom: 35px;
        }
        .single .read-more {
            margin-top: 10px;
        }

        .article .section-1 .title {
            font-size: 22px;
            line-height: 35px;
            margin-bottom: 5px!important;
        }
        .article .section-1 .details {
            font-size: 15px;
        }
    }
    @media (width < 1151px) {}
    @media (width < 1076px) {}
    @media (width < 1025px) {}
    @media (width < 991px) {
        .articles .section-2 .single .image {
            height: 265px;
        }
        .articles .section-2 .single .right {
            padding-left: 12px;
        }

        .article .section-2 .image {
            height: 380px;
            margin-bottom: 20px;
        }
        .article .section-3 .single .image {
            height: 200px;
        }
    }
    @media (width < 845px) {}
    @media (width < 768px) {
        .articles .section-2 .single {
            margin-bottom: 25px;
        }
        .articles .section-2 .pagination {
            margin: auto;
        }

        .article .section-1 .title {
            font-size: 20px;
            line-height: 30px;
        }
        .article .section-1 .details {
            font-size: 14px;
        }
        .article .section-2 .image {
            height: 330px;
        }
        .article .section-3 .single {
            margin-bottom: 25px;
            &:last-child {
                margin-bottom: 0;
            }
        }
    }
    @media (width < 721px) {}
    @media (width < 651px) {}
    @media (width < 576px) {}
    @media (width < 481px) {}
    @media (width < 429px) {
        .articles .section-2 .single .image {
            height: 230px;
        }

        .article .section-2 .image {
            height: 250px;
            margin-bottom: 10px;
        }
    }
    @media (width < 415px) {}
    @media (width < 396px) {}
    @media (width < 377px) {}
    @media (width < 361px) {}
    @media (width < 331px) {}
/* #endregion */