/* Container for all the cards */
.card-container {
    display: flex;
    /* Enables horizontal scrolling */
    padding: 5vw 5vw 2lvh 5vw;
    scroll-behavior: smooth;
    /* Smooth scrolling */
    gap: 20px;
}


.card-container::-webkit-scrollbar {
    height: 10px;
    max-width: 50px;
    /* Adjust scrollbar height */
}

.card-container::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, 0.1);
    border-radius: 10px;
}

.card-container::-webkit-scrollbar-thumb:hover {
    background-color: rgba(0, 0, 0, 0.2);
    border-radius: 10px;
}

.card-container:hover {
    /*cursor: grab;*/
}

.card-container::-webkit-scrollbar-track {
    margin: 0 5vw 0 5vw;
}

/* Individual card styling */
.card {
    flex: 0 0 min(350px, calc(100vw - 15vw));

    /* Each card has a fixed width */
    background-color: #fff;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.card img {
    width: 100%;
    height: min(350px, calc(100vw - 15vw));
    /* Set a height for the image */
    object-fit: cover;
    /* Cover the space with image */
}

.card-content {
    padding: 15px;
}

.card-title {
    font-size: 1.2em;
    margin: 0;
    font-weight: var(--font-w-heading);
    font-variation-settings: "wght" var(--font-w-heading), "wdth" 100;
}

.card-description {
    margin-top: 10px;
    color: #666;
    font-size: 0.9em;
}

/* Container to hold buttons for scrolling */
.card-button-container {
    text-align: right;
    padding: 1rem;
    padding-right: 5vw;
}

.scroll-button {
    background-position: center;
    background-size: contain;
    opacity: 0.25;
    border: none;
    color: white;
    font-size: 16px;
    cursor: pointer;
    margin: 0 10px;
    border-radius: 50%;
    width: 3rem;
    height: 3rem;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    touch-action: manipulation;
    transition: opacity 0.2s;
}

@media (hover: hover) and (pointer: fine) {
    .scroll-button:hover {
        transform: scale(1.1);
        /* slight zoom effect */
        /* makes it appear lighter */
    }
}


.button-right {
    background-image: url("../assets/arrow_r.png");
}

.button-left {
    background-image: url("../assets/arrow_l.png");
}