.kampanj-area{
    /*one grid 90%*/
    --gridw:90vw;
    --fontbase: 20px;
}

@media (min-width:600px){
    .kampanj-area{
    /* two rows 90% and 4vw gap = 45vw - 2vw = 43 vw*/ 
    --gridw: 43vw;
    --fontbase: calc(0.06 * var(--gridw)); 
    }
}

@media (min-width:900px){
    .kampanj-area{
    /*three rows 90% and 4w gap = 30vw - 8/3 vw =  27.3 vw*/
    --gridw: 27.3vw;
    }
}

@media (min-width:1200px){
    .kampanj-area{
    /*four rows 90% and 4w gap = 22.5vw - 12/4 vw =  19.5vw*/
    --gridw: 19.5vw;
    }
}


.kampanj-area{
    width: 90%;
    margin: auto;
    display: flex;
    gap: 4vw;
    flex-wrap: wrap;
    justify-content: center;
    padding-bottom: calc(0.1 * var(--gridw));
    overflow:visible;
}




/********** Single offer *************/

.single-offer{
    width: var(--gridw);
    position: relative;
}



/********** Single offer images *************/

.single-offer .single-product-image{
    max-width: 90%;
    max-height:calc(0.7 * var(--gridw));
    position: absolute;
    top: calc(0.35 * var(--gridw));
    left: 50%;
    transform: translate(-50%, -50%);
    transition: 1s;
}

.single-offer .ean-gallery{
    width: var(--gridw);
    max-width: var(--gridw);
    height:calc(0.7 * var(--gridw));
    position: absolute;
    top: calc(0.35 * var(--gridw));
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    justify-content: center;
    gap: 5px;
    transition: 1s;
}

.single-offer .ean-gallery.vertical{
    flex-direction: column; 
}

.single-offer .ean-gallery img{
    width: auto;
    height: auto;
    max-height: calc(0.7 * var(--gridw));
    object-fit:scale-down;
}

.single-offer .ean-gallery.flex2 img{
    max-width: calc(0.5 * var(--gridw));
    
}

.single-offer .ean-gallery.flex3 img{
    max-width: calc(0.33 * var(--gridw));
}

.single-offer .ean-gallery.flex4 img{
    max-width: calc(0.25 * var(--gridw));
}

.single-offer .ean-gallery.flex5 img{
    max-width: calc(0.2 * var(--gridw));
}


.single-offer .ean-gallery.flex2.vertical img{
    max-width: unset;
    max-height:calc(0.35 * var(--gridw));
}

.single-offer .ean-gallery.flex3.vertical img{
    max-width: unset;
    max-height:calc(0.175 * var(--gridw));
}

.single-offer .ean-gallery.flex4.vertical img{
    max-width: unset;
    max-height:calc(0.875 * var(--gridw));
}

.single-offer .ean-gallery.flex5.vertical img{
    max-width: unset;
    max-height:calc(0.4375 * var(--gridw));
}

.single-offer:hover .single-product-image, .single-offer:hover .ean-gallery{
    transform: scale(1.1) translate(-45%, -45%) rotate(3deg);
    transition: 1s;
}


/********** Single offer price *************/


.single-offer .kampanj-splash{

    width: calc(0.35 * var(--gridw));
    height: auto;
    min-height: calc(0.5 * var(--gridw));;
    position: absolute;
    top: calc(0.2 * var(--gridw));
    left: 75%;
    transform: translatex(-50%);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center top;
}




.single-offer .price{
    position: absolute;
    top: calc(0.45 * var(--gridw));
    left: 75%;
    transform: translate(-50%, -50%);
    font-family: ks-rubrik-black;
    font-size: calc(0.17 * var(--gridw));
    line-height:calc(0.17 * var(--gridw));
    margin: 0;
    color: var(--icayellow);
    -webkit-text-stroke-width: 1px;
    -webkit-text-stroke-color: var(--icared);
}

.single-offer .price span{
    font-size: calc(0.1 * var(--gridw));
    position: relative;
    top: calc(-0.055 * var(--gridw));     
    }

.single-offer .prefix, .single-offer .suffix{
    font-size: calc(0.07 * var(--gridw));
    line-height: calc(0.07 * var(--gridw));
    display: block;
    position: absolute;
    top: calc(0.28 * var(--gridw));
    left: 75%;
    transform: translate(-50%, -50%);
    text-align: center;
    color: var(--icayellow);
    font-family: ks-text;
    font-weight: 600;
}

.single-offer .suffix{
   top: calc(0.48 * var(--gridw)); 
}

.single-offer .price.stammis, .single-offer .prefix.stammis, .single-offer .suffix.stammis{
    color: #000000;
    -webkit-text-stroke-color: #000000;
}


/********** Single offer content *************/

.single-offer .content{
    margin-top: calc(0.73 * var(--gridw)); 
    padding: 0 calc(0.05 * var(--gridw));
    z-index:2;
    position: relative;
}

.single-offer h2{
    font-family: ks-rubrik-black;
    font-size: calc(1.8 * var(--fontbase));
    line-height: calc(1.8 * var(--fontbase));
    text-align: center;
    margin: 0 0 calc(0.02 * var(--gridw)) 0;
    word-break: break-word;
}

.single-offer .description{
    font-family: ks-text-bold;
    font-size: calc(1 * var(--fontbase));
    margin: 0;
    text-align: center;
}

.single-offer .details{
    font-size: calc(1 * var(--fontbase));
    margin: 0;
    text-align: center;
}

.single-offer .details span:not(:first-child)::before{
    /*content: "\2022\00a0";*/
}

.stamps{
    position: absolute;
    top: 0;
    left: 0;
}


.stamp{
    width: calc(3 * var(--fontbase));
    height: calc(3 * var(--fontbase));
    background-size:contain;
    background-position: center;
    background-repeat: no-repeat;
    margin-right: calc(1 * var(--fontbase));
    float: left;
}