#divSredinaSadrzaj{
    padding: .3em;
    font-size: 1.3em;
}
.divSrSadrzajSegment{
    position: relative;
    margin-bottom: 5em;
}
.spnSegmentNaslov{
    font-size: 2em;
    display: block;
    padding: 1em 0 .5em 0;
    text-shadow: 2px 2px 4px var(--senka);
    letter-spacing: 1px;
}
.imgSegmentSl{
    position: absolute;
    -webkit-mask-image: linear-gradient(blue, transparent);
    mask-image: linear-gradient(blue, transparent);
}
.spnSegmentTekst{
    font-size: 1.2em;
    padding: 0 0 .6em 0;
    display: block;
}
#divSajtPaketi{
    display: grid;
}
.divSajtPaket{
    background-color: var(--belaProzirna);
    /* border: 2px solid var(--tegetIvice); */
    box-shadow: 2px 2px 9px var(--senka);
    display: inline-block;
    width: 45%;
    padding: .5em;
    border-radius: 1em;
    width: 100%;
    position: relative;
    padding-bottom: 2em;
}
.spnPaketNaslov{
    font-weight: 700;
    letter-spacing: .15em;
    margin-bottom: .5em;
    display: block;
    background-color: rgba(0, 37, 70, 0.982);
    width: fit-content;
    padding: .5em 1em;
    border-radius: 1em;
}
.spnPaktSadrzaj{
    display: block;
}
.spnPaktCena{
    display: block;
    font-size: 1.5em;
    font-weight: 700;
    letter-spacing: .1em;
    position: absolute;
    right: 0em;
    bottom: -.5em;
    transform: rotate(18deg);
    border-top: 2px solid;
    border-bottom: 4px solid;
    text-align: center;
}
.divSajtPaket:nth-child(1) .spnPaktCena{
    color: yellow;
}
.divSajtPaket:nth-child(2) .spnPaktCena{
    color: gold;
}
.divSajtPaket:nth-child(3) .spnPaktCena{
    color: lightblue;
}
.divSajtPaket:nth-child(4) .spnPaktCena{
    color: lawngreen;
}
.divSajtPaket:nth-child(5) .spnPaktCena{
    color: orangered;
}
.divSajtPaket:nth-child(5) .spnPaktCena span{
    color: yellow;
    display: block;
    font-size: .5em;
    font-weight: 400;
}
.spnSegmentTekst2{
    font-size: .8em;
    margin-top: 2.5em;
    display: block;
}
.spnSegmentTekst3{
    font-size: .8em;
    margin-top: .5em;
    display: block;
}
#divProdavnicePaketi{
    display: grid;
}
#divProdavnicePaketi .divSajtPaket:nth-child(1) .spnPaktCena{
    color: brown;
}
#divProdavnicePaketi .divSajtPaket:nth-child(2) .spnPaktCena{
    color: orange;
}
#divOdrzavanjePaketi{
    display: grid;
}
#divOdrzavanjePaketi .divSajtPaket:nth-child(1) .spnPaktCena{
    color: bisque;
}
#divOdrzavanjePaketi .divSajtPaket:nth-child(1) .spnPaktCena span{
    color: yellow;
    display: block;
    font-size: .5em;
    font-weight: 400;
}
#divOdrzavanjePaketi .divSajtPaket:nth-child(2) .spnPaktCena{
    color: red;
}
#divOdrzavanjePaketi .divSajtPaket:nth-child(2) .spnPaktCena span{
    color: yellow;
    display: block;
    font-size: .5em;
    font-weight: 400;
}
@media screen and (max-width:480px){
    #divSredinaSadrzaj{
        overflow: hidden;
    }
    .imgSegmentSl{
        width: 13em;
        right: 0%;
        top: 0%;
        z-index: -1;
        -webkit-mask-image: -webkit-gradient(linear, top 50%, bottom, from(rgba(0,0,0,.8)), to(rgba(0,0,0,0)))
        /* -webkit-mask-image: linear-gradient(transparent 50%,blue 30%, transparent 90%); */
        /* mask-image: linear-gradient(blue, transparent); */
    }
    #divSajtPaketi{
        grid-auto-rows: 1fr;
        grid-template-columns: 1fr;
        gap: 2em;
        z-index: 10;
    }
    .divSajtPaket{
        z-index: 10;
    }
    .spnPaktCena{
        right: .2em;
    }
    #divProdavnicePaketi{
        grid-auto-rows: 1fr;
        grid-template-columns: 1fr;
        gap: 2em;
    }
    #divOdrzavanjePaketi{
        grid-template-columns: 1fr;
        grid-auto-rows: 1fr;
        gap: 2em;
    }
}
@media screen and (min-width:481px) and (max-width:768px){
    #divSredinaSadrzaj{
        overflow: hidden;
    }
    #divSajtPaketi{
        grid-template-columns: 1fr 1fr;
        grid-auto-rows: 1fr;
        gap: 2em;
    }
    .imgSegmentSl{
        width: 13em;
        z-index: -1;

        right: 0%;
        top: 0%;
        -webkit-mask-image: -webkit-gradient(linear, top 50%, bottom, from(rgba(0,0,0,.8)), to(rgba(0,0,0,0)))
        /* -webkit-mask-image: linear-gradient(transparent 50%,blue 30%, transparent 90%); */
        /* mask-image: linear-gradient(blue, transparent); */
    }
    .spnPaktCena{
        right: .4em;
    }
    #divProdavnicePaketi{
        grid-template-columns: 1fr;
        grid-auto-rows: 1fr;
        gap: 2em;
    }
    #divOdrzavanjePaketi{
        grid-template-columns: 1fr;
        grid-auto-rows: 1fr;
        gap: 2em;
    }
    
}
@media screen and (min-width:769px){
    #divSredinaSadrzaj{
        margin: 1em auto 1em auto;
        max-width: 70%;
        display: flex;
        flex-direction: column;
        gap: 4em;
    }
    #divSajtPaketi{
        grid-template-columns: 1fr 1fr;
        grid-auto-rows: 1fr;
        gap: 2em;
    }
    .imgSegmentSl{
        width: 13em;
        right: 0%;
        top: -10%;
    }
    #divProdavnicePaketi{
        grid-template-columns: 1fr;
        grid-auto-rows: 1fr;
        gap: 2em;
    }
    #divOdrzavanjePaketi{
        grid-template-columns: 1fr;
        grid-auto-rows: 1fr;
        gap: 2em;
    }
    
}