:root {
    --carousel-offset: 20px;
}

@media screen and (max-width: 480px) {
    :root {
        --carousel-offset: 4vw;
    }
}

.cards__carousel_container {
    position: relative;
    display: flex;
    align-items: center;
    width: 100vw;
    margin-left: calc(-1 * var(--carousel-offset));
}

.cards_section:last-child .cards__carousel_container,
.cards_body_container > div:last-child .cards__carousel_container {
    padding-bottom: 210px;
}

.cards__carousel_items {
    display: flex;
    overflow-x: auto;
    scroll-behavior: smooth;
    gap: 20px;
    padding: 10px 20px;
    
    /* Hack to allow absolute positioned overlays to expand downward without being clipped */
    padding-bottom: 250px;
    margin-bottom: -250px;
    
    width: 100%;
    scrollbar-width: none; /* Firefox */
}

.cards__carousel_items::-webkit-scrollbar {
    display: none; /* Safari and Chrome */
}

.cards__carousel_items > * {
    flex: 0 0 auto;
}

.cards__carousel_arrow {
    position: absolute;
    top: 100px; /* 10px padding + 90px (half of 180px card height) */
    transform: translateY(-50%);
    font-size: 16px;
    z-index: 95;
    margin: 0 5px;
}

.cards__carousel_prev {
    left: var(--carousel-offset);
    transform: translate(-50%, -50%);
}

.cards__carousel_next {
    right: var(--carousel-offset);
    transform: translate(50%, -50%);
}