html {
--colgr1: #133843;
--colgr2: #2f7681;
--colgr3: #46989e;
}

.kontbox {width:92%; height:85%;  border-radius:1vw;  color:var(--c2); padding:0.5vw; 
           box-shadow: 5px 5px 5px 0px rgba(0,0,0,0.75); position:relative}
.kontbox h3 {font-size:1.2vw; line-height:1.6vw; font-weight:500; text-shadow: 0.08vw 0.08vw var(--c11);}
.kontbox img {width:7vw; height:7vw; position:absolute; right:1vw; top:2.1vw}

.kontbox:hover > h3 {color:rgb(255,204,0)}
.kontbox .popis {width:10vw; position:absolute; bottom:10px; font-size:1vw; line-height:1.3vw}

.poz_1{
background: linear-gradient(20deg, var(--colgr1) 0%, var(--colgr2) 50%, var(--colgr3) 100%);
}

.poz_2{
background: linear-gradient(40deg, var(--colgr1) 0%, var(--colgr2) 50%, var(--colgr3) 100%);
}

.poz_3{
background: linear-gradient(80deg, var(--colgr1) 0%, var(--colgr2) 50%, var(--colgr3) 100%);
}

.poz_4{
background: linear-gradient(120deg, var(--colgr1) 0%, var(--colgr2) 50%, var(--colgr3) 100%);
}

.poz_5{
background: linear-gradient(160deg, var(--colgr1) 0%, var(--colgr2) 50%, var(--colgr3) 100%);
}

.poz_6{
background: linear-gradient(200deg, var(--colgr1) 0%, var(--colgr2) 50%, var(--colgr3) 100%);
}

.poz_7{
background: linear-gradient(240deg, var(--colgr1) 0%, var(--colgr2) 50%, var(--colgr3) 100%);
}

.poz_8{
background: linear-gradient(280deg, var(--colgr1) 0%, var(--colgr2) 50%, var(--colgr3) 100%);
}

.poz_9{
background: linear-gradient(320deg, var(--colgr1) 0%, var(--colgr2) 50%, var(--colgr3) 100%);
}







@media only screen and (max-width: 600px) {

.kontbox {width:100%; height:28vw; float:left;  border-radius:1vw;  color:var(--c2); padding:0.5vw; 
           box-shadow: 5px 5px 5px 0px rgba(0,0,0,0.75); position:relative; font-size:1rem; margin:2vw 0 2vw 0}

.kontbox img {width:18vw; height:18vw; right:1vw; top:5vw}
.kontbox h3 {width:70vw; margin:1vw 0 0 1vw; float:left; font-size:5vw; line-height:5vw}
.kontbox .popis {width:70vw; font-size:4vw; line-height:4.5vw; left:1.5vw}


}