@charset "utf-8";
/* CSS Document */

/* ==================== MULTIPLE SWIPER SYSTEM ==================== 

01 VARIABLES
02 CONTAINER
03 WRAPPER
04 SLIDE
05 MEDIA
06 MEDIA FIT VARIANTS
07 TEXT
08 NAVIGATION
09 SIZE VARIANTS
10 RESPONSIVE

============================================================  */




/* ====== 01 VARIABLES ====== */
:root{
    --swiper-navigation-color:#1AFF00;
    --swiper-navigation-size:40px;
    --swiper-navigation-sides-offset:4px;
    --swiper-navigation-top-offset:50%;
}

/* ====== 02 CONTAINER ====== */
.swiper{
    position:relative;
    width:100%;
    overflow:hidden;
    user-select:none;
}

/* ====== 03 WRAPPER ====== */
.swiper-wrapper{
    align-items:stretch;
}

/* ====== 04 SLIDE ====== */
.swiper-slide{
    position:relative;
    overflow:hidden;

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

    height:auto;
    aspect-ratio:var(--swiper-ratio);

    box-sizing:border-box;
    background:#000;
    border-radius:16px;
}

/* ====== 05 MEDIA ====== */
.swiper-media{
    position:absolute;
    inset:0;

    width:100%;
    height:100%;

    display:block;
    max-width:none;

    object-fit:contain;
}

/* ====== 06 MEDIA FIT VARIANTS ====== */
.swiper--fit-cover .swiper-media{
    object-fit:cover;
}

.swiper--fit-contain .swiper-media{
    object-fit:contain;
}

/* ====== 07 TEXT ====== */
.swiper-fast-rubrik{
    position:absolute;
    top:2rem;
    left:2rem;
    z-index:100;

    margin:0;
    pointer-events:none;
	
	font-size:clamp(0.75rem, 3vw, 1.25rem);
}

.swiper-fast-under-rubrik{
    position:absolute;
    top:4rem;
    left:2rem;
    z-index:100;

    margin:0;
    pointer-events:none;
	
	font-size:clamp(0.55rem, 2.2vw, 0.75rem);
}

.swiper-caption{
    position:absolute;
    left:20px;
    bottom:20px;
    z-index:100;

    max-width:min(80%, 520px);
    pointer-events:none;
}

.swiper-caption > *{
    max-width:65ch;
}
.swiper-caption h4,
.swiper-caption h5{
    font-size:var(--text-xs);
    line-height:1.35;
}

.swiper-title,
.swiper-text{
    margin:0;
}

/* ====== 08 NAVIGATION ====== */
.swiper-button-prev,
.swiper-button-next{
    z-index:120;
    border-radius:50%;
    padding:10px;
    box-sizing:border-box;
}

/* ====== 09 SIZE VARIANTS ====== */
.swiper--video169{
    --swiper-ratio:16/9;
}

.swiper--video43{
    --swiper-ratio:4/3;
}

.swiper--video-banner{
    --swiper-ratio:1920/540;
}

.swiper--video-sq{
    --swiper-ratio:1/1;
}

.swiper--img169{
    --swiper-ratio:16/9;
}

.swiper--img43{
    --swiper-ratio:4/3;
}

.swiper--square{
    --swiper-ratio:1/1;
}

/* ====== 10 RESPONSIVE ====== */
@media (min-width:1920px){
    .swiper{
        max-width:1920px;
        margin-inline:auto;
    }
}

@media (max-width:768px){
    .swiper-fast-rubrik{
        top:1rem;
        left:1rem;
    }

    .swiper-caption{
        left:1rem;
        bottom:1rem;
        max-width:calc(100% - 2rem);
    }
}


@media (max-width:768px){

    .swiper-fast-rubrik{
        top:0.75rem;
        left:0.75rem;
        right:0.75rem;

        max-width:calc(100% - 1.5rem);

        font-size:var(--text-xs);
        line-height:1.25;
    }

    .swiper-caption{
        left:0.75rem;
        right:0.75rem;
        bottom:0.75rem;

        max-width:calc(100% - 1.5rem);
    }

    .swiper-caption h3,
    .swiper-caption p{
        font-size:var(--text-xs);
        line-height:1.25;
    }
}