#latest { margin-top: 50px !important; }
#latest > .content-wrapper { position: relative; }

/*----------------------------------------------------------------------*/

#latest > .content-wrapper > .title {
    position: absolute; z-index: 2;
    
    font-size: 30px;
    font-weight: 700;
    color: var(--main-color);
}
#latest > .content-wrapper > .title > span { font-weight: 300; }
@media (min-width: 650px)    { #latest > .content-wrapper > .title { top: 50px; left: 50px; } }
@media (max-width: 649.99px) { #latest > .content-wrapper > .title { top: 30px; left: 30px; } }

/*----------------------------------------------------------------------*/

@media (min-width: 1100px) {
    #latest > .content-wrapper > .pagination {
        position: absolute; bottom: 50px; left: 50%; z-index: 2; transform: translate(-50%, -50%);
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        column-gap: 20px;
    }
    #latest > .content-wrapper > .pagination > .swiper-pagination-bullet {
        position: relative;
        display: block; height: 3px; width: 50px;
        padding: 1px 0;

        background-color: #E7E7E7;
        background-clip: content-box;
        border-radius: 0;

        opacity: 1;
    }
    #latest > .content-wrapper > .pagination > .swiper-pagination-bullet:after {
        content: '';
        position: absolute; top: 0; bottom: 0; left: 0;
        display: block; width: 0;

        background-color: var(--main-color);
        border-radius: 1.5px;
    }
    .loaded #latest > .content-wrapper > .pagination > .swiper-pagination-bullet-active:after { transition: width 8s linear; }
    #latest > .content-wrapper > .pagination > .swiper-pagination-bullet-active:after { width: 100%; }
}
@media (max-width: 1099.99px) {
    #latest > .content-wrapper > .pagination { display: none; }
}