/* Basic styling for the slider */
.np-slider { position: relative; overflow: hidden; border-radius: 4px; }
.np-slider__track { display: flex; transition: transform 0.6s ease; will-change: transform; }
.np-slide { min-width: 100%; position: relative; }
.np-slide img { display: block; width: 100%; height: auto; }

.np-slide__caption { position: absolute; left: 4%; bottom: 8%; max-width: 60%; color: #fff; padding: 12px 16px; border-radius: 4px; }
.np-slide__title { margin: 4px 0; font-size: 1.6rem; line-height: 1.2; }
.np-slide__prefix, .np-slide__suffix { font-size: .9rem; }
.np-slide__desc { margin: 6px 0 0; font-size: .95rem; }
.np-slide__cta { display: inline-block; margin-top: 8px; padding: 6px 10px; background: #b93241; color: #fff; border-radius: 4px; font-weight: 600; }

.np-slider__nav { position: absolute; top: 50%; transform: translateY(-50%); border: 0; background: rgba(0,0,0,.35); color: #fff; font-size: 24px; line-height: 1; padding: 8px 12px; border-radius: 8px; cursor: pointer; z-index: 2; }
.np-slider__nav--prev { left: 8px; }
.np-slider__nav--next { right: 8px; }

.np-slider__dots { position: absolute; left: 50%; bottom: 8px; transform: translateX(-50%); display: flex; gap: 6px; }
.np-slider__dots button { width: 8px; height: 8px; border-radius: 50%; border: 0; background: rgba(255,255,255,.5); cursor: pointer; }
.np-slider__dots button.is-active { background: #fff; }

@media (max-width: 767px) {
    .np-slide__caption { max-width: 92%; left: 4%; right: 4%; bottom: 4%; }
    .np-slide__title { font-size: 1.2rem; }
}

@media (min-width: 992px) {
    .np-slide__caption {
        top: 50%;
        left: 4%;
        right: 4%;
        bottom: auto;
        transform: translateY(-50%);
        max-width: none;
        display: block;
        text-align: left;
        padding-right: clamp(220px, 26vw, 360px);
    }

    .np-slide__title  { font-size: 3.2rem; }
    .np-slide__suffix { font-size: 1.7rem; }

    .np-slide__cta {
        position: absolute;
        top: 50%;
        right: 4%;
        transform: translateY(-50%);
        margin: 0;
        padding: 20px 40px;
        font-size: 1.7rem;
    }
}