@font-face {
    font-family: 'Comfortaa';
    src: url('../resources/Comfortaa-VariableFont_wght.ttf') format('truetype');
}

.center{
    justify-content: center;
}
.carouselLabel{
    text-align: center;
}

.carousel{
    width: 848px;
    height:424px;
    display: flex;

}

.half{
    width: 432px;
}


.carousel > div{
    display: flex;
     align-items: center; 

}
.carousel > div img, .carousel div p{
    margin:0px 10px;
    border: solid 4px  #565d69;
    border-radius: 16px;
}


.carousel > div p{
    padding:10px;
    width:  380px;
    height:380px;

}   

.carousel > div img{
    width:  400px;
    height:400px;
    object-fit: cover;

}   






.carouselWrapper{
    display: flex;
    align-items: center;
}
.carouselWrapper > button{
    border: solid 4px  #565d69;
    border-radius: 16px;
    background: none;
    font-size: 20px;
    height:64px;

}

.carouselWrapper > button:hover{
    transform: scale(1.02);
}

.carouselWrapper > button:active{
    background-color: #d2dbea;
}


@media (max-width: 1400px) {
    .carousel{
    width: 658px;
    height:324px;
    }
        
    .half{
        width: 318px;
    }
    .carousel > div p{
        width:  280px;
        height:280px;
    }   
    .carousel > div img{
        width:  300px;
        height:300px;
    } 

}
@media (max-width: 725px) {
    .carouselWrapper > button{
        font-size:15px
        
    }
    .carouselWrapper > button{
        height:48px;

    }


    .carousel{
        width:446px;
        height:224px;
    }

    .half{
        width:224px;

    }

    .carousel > div p{
    padding:10px;
    width:  180px;
    height:180px;
    }   

    .carousel > div img{
        width:  200px;
        height:200px;
        object-fit: cover;

    }  




}

@media (max-width: 500px) {
    .carousel{
        width: 224px;
    }


    .carousel > div{
    scroll-snap-align: unset;
    gap:10px;
    flex-wrap: wrap;

    }

    .carousel > div > * {
    scroll-snap-align: center;

    }
}