/* ============================================================
   RESPONSIVE HORIZONTAL SLIDER
   ============================================================ */

/* Wrapper */
.horiz-section {
    width: 100vw;
    height: calc(var(--vh, 1vh) * 100);
    overflow: hidden;
    position: relative;
    margin: 0;
    padding: 0;
}

/* Track */
.horiz-track {
    display: flex;
    flex-wrap: nowrap;
    height: 100%;
    transition: transform 0.45s ease;
}

/* Slide */
.horiz-slide {
    width: 100vw;
    height: calc(var(--vh, 1vh) * 100);
    flex-shrink: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    font-size: 3rem;
    color: #fff;
    overflow: hidden;
}

/* Demo backgrounds */
.slide-1 { background: #00aaff; }
.slide-2 { background: #ffaa00; }
.slide-3 { background: #66cc66; }

/* Arrows */
.hs-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    font-size: 48px;
    color: white;
    cursor: pointer;
    z-index: 10;
    user-select: none;
}

.hs-left { left: 20px; }
.hs-right { right: 20px; }

.hs-arrow.disabled {
    opacity: 0.3;
    pointer-events: none;
}