@font-face {
    font-family: 'GothamRounded-Bold';
    src: url('fonts/GothamRounded-Bold.woff') format('woff');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'GothamRounded-Medium';
    src: url('fonts/GothamRounded-Medium.woff') format('woff');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

.carousel-container {
    width: 100%;
    padding: 0 max(30px, 0.025vw);
    height: auto;
}

.carousel {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 48px;
    max-width: 1320px;
    margin: 0 auto;
}

@media (max-width: 1400px) and (min-width: 676px) {
    .carousel {
        gap: calc(48 / 1400 * 100vw);
    }
}

@media (max-width: 675px) {
    body {
        overflow-x: hidden;
    }
    
    .carousel-container {
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        padding: 0;
        width: 100%;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }
    
    .carousel-container::-webkit-scrollbar {
        display: none;
    }
    
    .carousel {
        justify-content: flex-start;
        gap: calc(35 / 675 * 100vw);
        padding: 0 20px;
        width: max-content;
        min-width: 100%;
        max-width: none;
    }
}