.slikovnice-grid {
            display: grid;
            gap: 12px;
            grid-template-columns: repeat( 4, 1fr);
        }
        .slikovnica-item {
            text-align: center;
            transition: all 0.3s ease;
            cursor: pointer;
        }
        
        .slikovnica-item img {
            width: 100%!important;
            height:230px!important;
            object-fit:cover!important;
            margin-bottom: 20px!important;
            transition: all 0.3s ease;
        }
        .slikovnica-title {
            font-family: "DiurnalL", Sans-serif;
            font-size: clamp(24px, 3vw, 32px);
            font-weight: 700;
            line-height: clamp(28px, 4vw, 36px);
            padding:5px;
            transition: all 0.3s ease;
        }
        
        .slikovnica-item:hover img{
            opacity:0.5;
        }
        
        .slikovnica-item:hover .slikovnica-title{
            color: #FF8229;
        }
        
        .blusep {
            width: 100%;
            height:3px;
            background:#134272;
            direction: ltr;
            display: flex;
            margin: 35px 0;
            padding:0;
            
        }
        
        .informacije-grid {
            display: grid;
            gap: 12px;
            grid-template-columns: repeat( 2, 1fr);
        }
        
        
        .naziv-slk h2 {
            font-family: "DiurnalL", Sans-serif;
            font-size: clamp(48px, 7vw, 68px);
            font-weight: 700;
            line-height: clamp(58px, 7vw, 80px);
        }
        
        .autor-slk p{
            
            font-style: normal;
            font-weight: 900;
            font-size: 21px;
            line-height: 22px;
/* identical to box height, or 105% */
            display: flex;
            align-items: center;
            letter-spacing: 0.05em;
            font-variant: all-small-caps;
        }
        
        .slikovnica-nav {
            display: grid;
            gap: 12px;
            grid-template-columns: repeat( 2, 1fr);
        }
        
        .uzrast, .opcije-prikaza {
            text-align:center;
        }
        
        .uzrast-naziv, .naslov-opcija {
            font-style: normal;
            font-weight: 700;
            font-size: 21px;
            line-height: 22px;
            /* identical to box height, or 105% */
            text-align: center;
            letter-spacing: 0.05em;
            font-variant: all-small-caps;
           
        }
        .uzrast-godine {
            font-style: normal;
            font-weight: 700;
            font-size: 24px;
            line-height: 32px;
            /* identical to box height, or 133% */
            text-align: center;
        }

		.uzrast {
			display: flex;
    		flex-direction: column;
    		gap: 12px;
    		align-items: center;
		}
		.uzrast-ikona {
			width:60px;
			height:auto;
		}
        
        .nav-slikovnice {
            display: grid;
            gap: 12px;
            grid-template-columns: repeat( 2, 1fr);
        }

			.opcije-prikaza {
			display: flex;
    		flex-direction: column;
    		gap: 20px;
    		align-items: center;
			}

			.kontrole-opcija > div {
				cursor:pointer;
			}

.kontrole-autoplay circle, .kontrole-povecaj circle {
	transition: all 0.3s ease;
}
		.kontrole-autoplay:hover circle, .kontrole-povecaj:hover circle {
			fill:#FF8229;
		}
        
        .nav-previus, .nav-next {
            display:flex;
            gap:10px;
        }
        
        .nav-slikovnice p {
            margin:0;
        }
        
        .nav-slikovnice .elementor-icon {
            font-size:20px;
        }
        
        .nav-previus {
            justify-content: flex-start;
            font-style: normal;
font-weight: 700;
font-size: 21px;
line-height: 22px;
/* identical to box height, or 105% */
display: flex;
align-items: center;
text-align: right;
letter-spacing: 0.05em;
font-variant: all-small-caps;


        }
        
        .navigacija-next {
            display:flex;
            justify-content: flex-end;
        }
        
        .navigacija-previus {
            display:flex;
            justify-content: flex-start;
        }
        
        
        .go-next, .go-back {
            display:inline-flex;
            gap:12px;
            font-style: normal;
            font-weight: 700;
            font-size: 21px;
            line-height: 22px;
            /* identical to box height, or 105% */
            display: flex;
            align-items: center;
            text-align: right;
            letter-spacing: 0.05em;
            font-variant: all-small-caps;
            cursor:pointer;
        }

		.go-next span,.go-next p, .go-back span, .go-back p, .go-back path, .go-next path {
			 transition: all 0.3s ease;
		} 

		.go-next:hover,  .go-back:hover{
			color:#FF8229;
		}

		.go-next:hover path,.go-back:hover path  {
			fill:#FF8229;
		}

.df-ui-nav {
	display:none!important;
	opacity:0!important;
	visibility:hidden!important;
}
		

        
        
        .kontrole-opcija {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 25px 25px;
        }
        
        #moje-slikovnice {
            background:transparent!important;
        }
        
        
.df-page-back, .df-page-front {
	background:transparent!important;
}
        
        
        
        .slikovnice-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}
.slikovnice-grid {
    scroll-behavior: smooth;
}
/* Default Desktop View */
@media (min-width: 769px) {
    .slikovnice-grid {
        justify-content: flex-start;
    }

    .slikovnica-item {
        width: calc(25% - 15px); /* 4 in a row with gap */
    }
}

/* Mobile Slider */
@media (max-width: 768px) {
    .slikovnice-grid {
        flex-wrap: nowrap;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 10px;
    }

    .slikovnica-item {
		max-width:225px;
        flex: 0 0 80%;
        scroll-snap-align: start;
        margin-right: 10px;
    }

    .slikovnica-item img {
        width: 100%;
        height: auto;
        display: block;
    }
}
        
@media (max-width: 580px) {
	.informacije-grid {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(1, 1fr);
}
}
        
        
        
        
        
        
        /* Detailed info container */
        #slikovnica-details {
           
        }