:root {
    --slider-item-width: 230px;
    --slider-item-height: 300px;
    --slider-items-gap: 10px;
}

.div-slider {
    display: flex;
    width: 100%;
    height: fit-content;
    overflow: hidden;
    position: relative;
    mask-image: linear-gradient(to right,
                transparent,
                var(--main-bg-color) 5% 95%,
                transparent);
}

.slider-features {
    display: flex;
    gap: var(--slider-items-gap);
    transition: transform 0.5s ease-in-out;
}

.slider-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: var(--primary-color);
    color: black;
    font-size: 1.1rem;
    padding: 20px 10px;
    text-align: center;
    border-radius: 15px;
    width: var(--slider-item-width);
    min-height: var(--slider-item-height);
    flex-shrink: 0;
    transition: all .2s ease-in-out;
}

.slider-item:hover {
    background-color: var(--primary-color-darker);
}

.slider-button {
    position: absolute;
    padding: 10px 15px;
    font-size: 1.5rem;
    font-weight: bold;
    background: rgba(0, 0, 0, 0.5);
    color: white;
    border: none;
    border-radius: 100%;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    z-index: 10;
}

.slider-button-left { 
    left: 10px; 
}
.slider-button-right { 
    right: 10px; 
}

.slider-button:hover {
    background: rgba(0, 0, 0, 0.8);
}

/* button hitbox */
.slider-button::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 300%;
    height: 600%;
}

/* media query */
@media screen and (max-width: 800px) {
    :root {
        --slider-item-width: 200px;
        --slider-item-height: 250px;
        --slider-items-gap: 5px;
    }

    .slider-item {
        font-size: 0.9rem;
    }
}