.list-page .section-top {
    width              : 100%;
    height             : 50vh;
    background-image   : url(/images/background-1.jpg);
    background-size    : cover;
    background-position: center;
    padding            : 6rem 4rem;
    box-sizing         : border-box;
    display            : flex;
    flex-direction     : column;
    align-items        : flex-start;
    justify-content    : center;
}

.list-page .section-top .title {
    font-family        : 'MontserratSemiBold', sans-serif;
    font-size          : 5vh;
    font-weight        : unset;
    color              : transparent;
    -webkit-text-stroke: 1px white;
    margin-bottom      : 0.5rem;
    margin-top         : unset;
}

.list-page .section-top .title-2 {
    font-family: 'MontserratLight', sans-serif;
    font-size  : 1.5vh;
    line-height: 2.25vh;
    color      : white;
}

.list-page .container {
    position        : relative;
    display         : flex;
    flex-direction  : column;
    align-items     : flex-start;
    justify-content : center;
    padding         : 4rem;
    box-sizing      : border-box;
    background-color: #2e2d38;
    min-height      : 30vh;
    /* margin-top   : 0;
    border-top      : 1px solid #2e2d38; */
}

.list-page .item-article {
    position     : relative;
    width        : 100%;
    aspect-ratio : 16 / 9;
    /* height    : 50vw; */
    margin-bottom: 4rem;
    opacity      : 0;
    overflow     : hidden;
    cursor       : pointer;
}

.list-page img {
    position  : relative;
    width     : 100%;
    height    : 100%;
    object-fit: cover;
    z-index   : 1;
    transition: 1s;
}

.list-page .item-article:hover img {
    transform: scale(1.25);
}

.list-page .item-article .title {
    position        : absolute;
    bottom          : 0;
    height          : 50%;
    width           : 100%;
    overflow        : hidden;
    background-color: rgb(46, 45, 56, 0.8);
    padding         : 1rem;
    box-sizing      : border-box;
    z-index         : 2;

    font-family: 'Montserrat', sans-serif;
    font-size  : 3.5vw;
    line-height: 3.5vw;
    color      : white;
    opacity    : 0.8;
}

.list-page .scroll-down {
    position       : absolute;
    display        : none;
    flex-direction : column;
    justify-content: center;
    align-items    : center;
    top            : 20rem;
    left           : 0;
}

.list-page .scroll-down img {
    width: 1.3rem;
}

.list-page .scroll-down div {
    font-family   : 'MontserratBold', sans-serif;
    color         : white;
    font-size     : 1.3rem;
    text-transform: uppercase;
    transform     : rotate(-90deg);
    margin-bottom : 5rem;
    opacity       : 0.8;
}

.list-page .menu {
    display         : flex;
    flex-direction  : row;
    justify-content : center;
    align-items     : center;
    background-color: #2e2d38;
    padding         : 4rem 2rem 0 2rem;
    box-sizing      : border-box;
    /* margin-bottom: 0;
    border-bottom   : 1px solid #2e2d38; */
}

.list-page .menu a {
    display: none;
}

.list-page .menu input {
    height          : 4rem;
    margin-left     : 1rem;
    padding         : 1rem 2rem;
    border          : 1px solid #494848;
    border-radius   : 19px;
    background-color: transparent;
    font-family     : "Montserrat", sans-serif;
    color           : #fff;
    outline         : none;
}

.list-page .menu input:focus {
    border: 1px solid #2779f5;
}

.list-page .menu button {
    width           : 4rem;
    height          : 4rem;
    background-color: #2779f5;
    border          : none;
    border-radius   : 50%;
    cursor          : pointer;
    margin-left     : 1rem;
}

.list-page .menu button img {
    width     : 1.7rem;
    height    : 2rem;
    object-fit: contain;
}

@media screen and (min-width: 450px) {
    .list-page .section-top {
        padding: 6rem 10rem;
    }

    .list-page .section-top .title {
        font-size: 6vw;
    }

    .list-page .section-top .title-2 {
        font-size  : 1.5vw;
        line-height: 2vw;
        max-width  : 60%;
    }

    .list-page .container {
        flex-direction : row;
        flex-wrap      : wrap;
        justify-content: space-around;
    }

    .list-page .container .item-article {
        width      : 40vw;
        /* height  : 65vh; */
        flex-shrink: 0;
    }

    .list-page .item-article .title {
        font-size  : 1.75vw;
        line-height: 2vw;
    }
}


@media screen and (min-width: 750px) {
    .list-page .scroll-down {
        display: flex;
        left   : -3rem;
        top    : 10rem;
    }

    .list-page .section-top {
        padding: 6rem 8rem;
    }

    .list-page .section-top .title {
        font-size: 6vw;
    }

    .list-page .section-top .title-2 {
        font-size  : 1.5vw;
        line-height: 2vw;
        max-width  : 60%;
    }

    .list-page .container {
        padding: 4rem 6rem;
    }

    .list-page .container .item-article {
        /* height: 28vw; */
    }

    .list-page .menu a {
        display        : block;
        font-family    : 'MontserratSemiBold', sans-serif;
        color          : white;
        font-size      : 1.3vw;
        text-transform : uppercase;
        text-decoration: none;
        margin         : 0.5rem;
    }
}

@media screen and (min-width: 1000px) {
    .list-page .section-top {
        padding: 6rem 10rem;
    }

    .list-page .section-top .title {
        font-size: 5vw;
    }

    .list-page .section-top .title-2 {
        font-size  : 1vw;
        line-height: 1.25vw;
        max-width  : 60%;
    }

    .list-page .container {
        padding: 4rem 10rem;
    }

    .list-page .container .item-article {
        width       : 25vw;
        aspect-ratio: 16 / 9;
        /* height   : 30vh; */
    }

    .list-page .item-article .title {
        font-size  : 1.25vw;
        line-height: 1.5vw;
        padding    : 2rem 2rem;
        box-sizing : border-box;
    }
}

@media screen and (min-width: 1200px) {
    .list-page .section-top {
        padding: 6rem 20rem;
    }

    .list-page .container {
        padding: 4rem 20rem;
    }

    .list-page .container .item-article {
        width       : 23vw;
        aspect-ratio: 16 / 9;
        /* height   : 20vw; */
    }

    .list-page .item-article .title {
        font-size  : 0.9vw;
        line-height: 1.15vw;
        padding    : 2rem 3rem;
    }

    .list-page .menu a {
        font-size: 1.4rem;
        margin   : 1rem;
    }
}

.load-more-section {
    display        : flex;
    justify-content: center;
    align-items    : center;
}

.load-more {
    display        : flex;
    justify-content: center;
    align-items    : center;
    margin         : 0px 30px 30px 30px;
    height         : 60px;
    width          : 230px;
    border-radius  : 30px;
    background     : transparent;
    border         : 2px solid #EFEFEF;
    cursor         : pointer;
    font-family    : 'MontserratBold';
    font-size      : 20px;
    color          : #fff;
    transition     : .3s;
}