/* Not the bootstrap carrousel */
:root {
    --boxWidth: 400px;
    --boxWidthMobile: 90vw;
    --boxHeight: 500px;
    --growFactor: 1.1;
    --moveLeft: calc(var(--boxWidth) * (var(--growFactor) - 1) / -2);
    --moveRight: calc(var(--boxWidth) * (var(--growFactor) - 1));
}

.row-slider {
    overflow: scroll;
    width: 100%;
}

.row-slider-inner {
    transition: transform 150ms;
    font-size: 0;
    white-space: nowrap;
    margin: 40px 0 35px 0;
    padding-bottom: 5px; /* Account for OS X scroll bar */
}

.box-slider {
    position: relative;
    display: inline-block;
    width: var(--boxWidth);
    height: var(--boxHeight);
    margin-right: 10px;
    font-size: 20px;
    transition: all 150ms;
    transform-origin: center left;
}
.box-slider::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 30%; /* Gradient height */
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgb(74, 74, 74) 100%);
    pointer-events: none; /* To not block the interactions */
}

.box-slider img {
    width: var(--boxWidth);
    height: var(--boxHeight);
    object-fit: cover;
}

@media (max-width: 768px) {
    .box-slider, .box-slider img {
        width: var(--boxWidthMobile);
    }
}

/* Hover effects */

/* Move the whole row towards the left */
.row-slider-inner:hover {
    transform: translate3d(var(--moveLeft), 0, 0);
}

.row-slider-inner:hover .box-slider:hover {
    /* Grow the current tile and make it opaque again */
    z-index: 2;
    transform: scale(var(--growFactor));
    opacity: 1;
}

/* Move all tiles right of the current tile to the right */
.box-slider:hover ~ .box-slider {
    transform: translate3d(var(--moveRight), 0, 0);
}