.headline {
	background-color: var(--color__silver);
}

@media (max-height: 580px) {
	.headline h1 {
		font-size: var(--size3);
	}
}

.headline__image {
	grid-column: 1 / -1;
	aspect-ratio: 16 / 9; 
}

	.headline__image img {
		width: 120%;
		height: 100%;
		margin-left: -20%;
		max-width: none;
		
		object-fit: cover;
		object-position: center bottom;
	}

.headline .ws__inner {
	padding: 2em 0; 
}

.headline__info {
	color: var(--color__green);
	text-transform: uppercase;
	font-size: var(--size-1);
}




	 

.hSection__more {
	text-align: center;
}

.podatki {
	--flow-space: 3em;
}

.podatki__carousel {
	--gap: 1em;
	margin-left: calc(var(--gap) / 2 * -1);
}

.podatki__carousel .slick-track {
	
	
	display: flex;
	align-items: stretch;
	gap: var(--gap);
}

.podatki__carousel .slick-slide {
	height: auto;

}

.podatki__carousel .slick-list {
	padding: 0 !important;
}

.podatki__carousel .slick-slide > div {
	height: 100%;
}


.podatek {
	display: flex !important;
	flex-direction: column;
	height: 100%;
	--padding: var(--wrapper__bodyPadding);
	
	text-align: center;
	border: 1px solid var(--color__silver);
	box-shadow: rgba(99, 99, 99, 0) 0px 2px 8px 0px;
	transition: box-shadow .3s;
}

.podatek:hover {
	box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
}

.podatek h3 {
	font-size: var(--size4);
	font-weight: 600;
}

.podatek header, 
.podatek footer, 
.podatek__body {
	padding: var(--padding);
}

.podatek__body {
	padding-top: 0;
	flex: 1 1 auto;
}

.podatek footer {
	border-top: 1px solid var(--color__silver);
	/* text-align: left; */
}

.podatek__tendenca {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	
	font-size: var(--size1);
	font-weight: 600;
}

	.podatek__tendenca span {
		font-size: 1.3em;
	}

.podatek__tendenca--negative {
	color: var(--color__red);
}

.podatek__tendenca--positive {
	color: var(--color__green);
}


.podatek__tendenca--down .icon {
	transform: rotate(180deg);
}

.podatki__carouselUtils {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	margin-top: 1em;
	padding: 0 3em;
}

.podatki__dots {
	display: none;
}

.podatki__paging {
	grid-column: 1 / span 3;
	grid-row: 1;
	
	display: flex;
	justify-content: space-between;
}

	.podatki__paging button {
		font-size: 1.5em;
	}		

.slick-next .icon {
	transform: rotate(180deg);
}

	.slick-disabled {
		opacity: 0.3;
		pointer-events: none;
	}

.podatki__count {
	grid-column: 2;
	grid-row: 1;
	
	display: flex;
	align-items: center;
	justify-content: center;
}






.porocila {
	--flow-space: 3em;
}











.porocilo {
	--padding: var(--wrapper__bodyPadding);
	
	border: 1px solid var(--color__silver);
}

	

.porocilo footer {
	padding: var(--padding);
	border-top: 1px solid var(--color__silver);
}

.porocilo {
	display: none;
}

	.home .porocilo:nth-child(-n+1) {
		display: block;
	}












@media (min-width: 37rem) {
	.home .porocilo:nth-child(-n+2) {
		display: block;
	}
}



@media (min-width: 48rem) {
	.headline:after {
		grid-row: 1;
		grid-column: 1 / span 8;
		z-index: 2;
		height: 100%;
		
		content: "";
		
		/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#ebedec+0,ebedec+30,ebedec+100&1+0,1+30,0+100 */
		background: linear-gradient(to right, rgba(235,237,236,1) 0%,rgba(235,237,236,1) 60%,rgba(235,237,236,0) 100%);
	}
	
	.headline .ws__A  {
		grid-row: 1;
		grid-column: var(--wrapper__gridOffsetLeft) / span 5;
		z-index: 3;
		padding-bottom: var(--wrapper__bodyPadding);
	}
	
	
	.headline {
		align-items: end;
	}
	
	.headline__image {
		grid-row: 1;
		aspect-ratio: 16 / 6; 
	}
	
		.headline__image img {
			margin-left: 30%;
			width: 70%;
			height: 100%;
			object-fit: cover;
			object-position: right bottom; 
		}
	
	
	.home .porocilo:nth-child(-n+3) {
		display: block;
	}
}

@media (min-width: 65rem) {
	.home .headline {
	}
	
	
		
	.headline .ws__A {
		align-self: center;
		grid-column: var(--wrapper__gridOffsetLeft) / span 4;
	}
	
	
	
	.podatki > * {
		grid-column: var(--wrapper__gridOffset);
	}
	
	.podatki__count {
		display: none;
	}
	
	.podatki__dots {
		display: block;
		grid-column: 1 / -1;
	}
	
	.podatki__dots ul {
		list-style: none;
		display: flex;
		gap: 0.5em;
		justify-content: center;
	}
	
	.podatki__dots button {
		width: 12px;
		height: 12px;
		
		border-radius: 4px;
		background-color: var(--color__silver);
		transition: background-color .3s;
	}
	
	.slick-active button {
		background-color: var(--color__green);
	}
	
	
	
	.home .porocilo:nth-child(-n+4) {
		display: block;
	}
}