/*postavitev*/
:root {
	--e: 7px;
	--e1: 15px;
	--e2: 30px;
	--e3: 60px;
	--e4: 120px;
	--e5: 240px;
	--e6: 480px;
}

.okvir{
	width:100%;
	padding: 0 var(--e2);
	margin: 0 auto;
	box-sizing: border-box;
	max-width: 1150px;
}

.grid{
	display: grid;
	 grid-gap: var(--e2);
}

.grid-columns-1{	 grid-template-columns: repeat(1, 1fr); }
.grid-columns-2{	 grid-template-columns: repeat(2, 1fr); }
.grid-columns-3{	 grid-template-columns: repeat(3, 1fr); }
.grid-columns-4{	 grid-template-columns: repeat(4, 1fr); }
.grid-columns-6{	 grid-template-columns: repeat(6, 1fr); }
.grid-columns-9{	 grid-template-columns: repeat(9, 1fr); }
.grid-columns-10{	 grid-template-columns: repeat(10, 1fr); }
.grid-columns-12{	 grid-template-columns: repeat(12, 1fr); }

.grid-span-2{	grid-column: span 2;}
.grid-span-3{	grid-column: span 3;}
.grid-span-4{	grid-column: span 4;}
.grid-span-6{	grid-column: span 6;}
.grid-span-9{	grid-column: span 9;}
.grid-span-10{	grid-column: span 10;}
.grid-span-12{	grid-column: span 12;}

.grid-gap-1{	 grid-gap:var(--e1); }
.grid-gap-2{	 grid-gap: var(--e2); }
.grid-gap-3{	 grid-gap: var(--e3); }
.grid-gap-4{	 grid-gap: var(--e4); }

.row-gap-0{		 grid-row-gap:0px; }
.row-gap-1{	 grid-row-gap:var(--e1); }
.row-gap-2{	 grid-row-gap: var(--e2); }
.row-gap-4{	 grid-row-gap: var(--e3); }
.row-gap-8{	 grid-row-gap: var(--e4); }

.content-end{
	grid-auto-flow: column;
	justify-content:end;
	margin-left:auto;
}


.p10{	padding:var(--e1);}
.p20{	padding:var(--e2);}

.pt1{padding-top:var(--e1)}
.pt2{padding-top:var(--e2)}
.pt3{padding-top:var(--e3)}
.pt4{padding-top:var(--e4)}
.pt5{padding-top:var(--e5)}
.pt6{padding-top:var(--e6)}

.pb1{padding-bottom:var(--e1)}
.pb2{padding-bottom:var(--e2)}
.pb3{padding-bottom:var(--e3)}
.pb4{padding-bottom:var(--e4)}
.pb5{padding-bottom:var(--e5)}
.pb6{padding-bottom:var(--e6)}

.mt1{ 	margin-top:var(--e1);}
.mt2{	margin-top:var(--e2);}
.mt3{	margin-top:var(--e3);}
.mt4{	margin-top:var(--e4);}
.mt5{	margin-top:var(--e5);}
.mt6{	margin-top:var(--e6);}

.mb1{	margin-bottom:var(--e1)}
.mb2{	margin-bottom:var(--e2);}
.mb3{	margin-bottom:var(--e3);}
.mb4{	margin-bottom:var(--e4);}
.mb5{	margin-bottom:var(--e5);}
.mb6{	margin-bottom:var(--e6);}

@media (max-width: 1000px) {
	.clani .grid-columns-3 {
		grid-gap: var(--e3);
		grid-template-columns: repeat(2, 1fr);
	}
}
@media (max-width: 700px) {
	:root {
	--e: 7px;
	--e1: 15px;
	--e2: 30px;
	--e3: 60px;
	--e4: 120px;
	--e5: 120px;
	--e6: 240px;
}

.grid-columns-2{	grid-template-columns: repeat(1, 1fr);
}

}

@media (max-width: 450px) {
	:root {
	--e: 7px;
	--e1: 15px;
	--e2: 30px;
	--e3: 60px;
	--e4: 60px;
	--e5: 120px;
	--e6: 120px;
}

}