.carousel{
    max-width: 58%;
    position: relative;
    margin-left: 8%;
    scroll-snap-type: x mandatory;
}

.carousel img{
    object-fit: cover;
    max-height: 300px;
    -webkit-mask-image: -webkit-gradient(linear, right bottom, left bottom, 
    color-stop(0.03,  rgba(0,0,0,0)),
    color-stop(0.20,  rgba(0,0,0,1)),
    color-stop(0.97, rgba(0,0,0,0)),
    color-stop(0.80,  rgba(0,0,0,1)));
}

.prev, .next{
    cursor: pointer;
    position: absolute;
    top: 4%;
    width: auto;
    margin-top: -22px;
    padding: 150px 2%;
    color: #fff;
    font-weight: bold;
    font-size: 18px;
    transition: 0.6s ease;
}

.prev{
    left: -5%;
}

.next{
    right: -5%;
}

.dotes{
    position: absolute;
    top: 90%;
    left: 48%;
    max-width: 63%;
}

.dot{
    cursor: pointer;
    height: 13px;
    width: 13px;
    margin: 0 2px;
    border-style: solid;
    border-width: 1px;
    border-radius: 50%;
    border-color: #ffffff;
    display: inline-block;
    transition: background-color 0.6s ease;
}

.active, .dot:hover{
    background-color: #ffffff;
}

.fade{
    -webkit-animation-name: fade;
    -webkit-animation-duration: 1.5s;
    animation-name: fade;
    animation-duration: 1.5s;
    scroll-snap-align: center;
}

@-webkit-keyframes fade{
    from{opacity: .4;}
    to{opacity: 1;}
}

@keyframes fade{
    from{opacity: .4;}
    to{opacity: 1;}
}

.posts{
    margin-top: 1%;
    display: flex;
    flex-wrap: wrap;
    margin-left: 4%;
    color: #fff;

    max-width: 980px;
}

.posts a{
    color: #fff;
    text-decoration: none;
    margin-left: 4%;
}

a .post{
    margin-left: 3%;
    max-width: 1290px;
}

a .post img{
    width: 200px;
}

.n{
    height: 114px;
}

.posts a .post h1{
    font-family: 'Akrobat';
    font-weight: 600;
    font-size: 0.75em;
    line-height: 100%;
}

.post p{
    font-family: 'Akrobat';
    font-weight: 500;
    font-size: 0.75em;
    line-height: 50%;
}

.info{
    position: absolute;
    top: -11%;
    left: 72%;
    right: 2%;
}

.info a{
    position: absolute;
    bottom: -20px;
    right: 10px;
    color: #fff;
    font-family: 'Akrobat';
    text-decoration: none;
}

.info_post:last-child{
    margin-bottom: 30%;
}

.info_post{
    display: flex;
    color: #fff;
    font-family: 'Akrobat';
    font-weight: 500;
    font-size: 0.42em;
    z-index: -1;
}

.info_post h1{
    margin-left: 3%;
}

@media (max-width: 480px){
    .carousel{
        margin-top: 4%;
        max-width: 88%;
    }

    .prev, .next{
        position: absolute;
        margin-top: 0;
        padding: 0;
        top: 30%;
        font-size: 10px;
    }
    .next{
        right: -2%;
    }
    
    .dotes{
        position: absolute;
        top: 70%;
        left: 40%;
        max-width: 63%;
    }

    .dot{
        width: 6px;
        height: 6px;
    }

    .info{
        display: none;
    }

    .posts{
        align-self: flex-end;
        justify-content: center;
    }

    .posts a{
        margin-right: 20px;
    }

    a .post{
        max-width: 300px;
    }

    a .post img{
        max-width: 300px;
    }
}