h1 {
    text-align: center; /* Centriranje */
    font-family: 'Georgia', serif; /* Stil slova */
    font-size: 2rem; /* Veličina slova */
    color: #444; /* Boja slova */
    margin-bottom: 30px; /* Razmak ispod naslova */
}

.gallery {
    display: grid; /* Koristimo CSS Grid za raspored */
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); /* Fleksibilni broj kolona */
    gap: 20px; /* Razmak između šestouglova */
    justify-content: center; /* Horizontalno centriranje galerije */
    max-width: 1200px; /* Ograničenje širine galerije */
    margin: 0 auto; /* Centriranje cele galerije */
    margin-bottom: 15px;
}


.clipped-border {
    position: relative; /* Omogućava pozicioniranje elemenata unutar */
    text-align: center;
    width: 200px; /* Širina šestougla */
    height: 200px; /* Visina šestougla */
    margin: auto;
}

.clipped-border img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    clip-path: polygon(50% 0%, 95% 25%, 95% 75%, 50% 100%, 5% 75%, 5% 25%);
}

.clipped-border h3 {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-family: 'Metal', sans-serif;
    font-size: 1.5rem;
    color: white;
    background: rgba(0, 0, 0, 0.5);
    padding: 10px 20px;
    border-radius: 10px;
    text-shadow: 0px 0px 10px rgba(255, 255, 255, 0.8), 0px 0px 20px rgba(255, 255, 255, 0.5); /* Svetla senka za sjaj */
    z-index: 2;
    pointer-events: none;
}



.clipped-border:hover h3 {
    color: #FFFF00 !important; /* Promena boje teksta pri hoveru */
}

.clipped-border:hover img {
    transform: scale(1.1); /* Uvećanje slike */
    transition: transform 0.3s ease-in-out;
}

.clipped-border:hover h3 {
    color: firebrick; /* Promena boje teksta */
}

/* Media query za mobilne uređaje */
@media screen and (max-width: 768px) {
  .gallery {
    grid-template-columns: repeat(2, 1fr); /* Dve kolone na tabletima */
    gap: 15px; /* Smanjen razmak između elemenata */
  }

  .clipped-border {
    width: 150px; /* Manja širina šestouglova */
    height: 150px; /* Manja visina šestouglova */
  }

  .clipped-border h3 {
    font-size: 1rem; /* Smanjena veličina teksta */
  }
}

@media screen and (max-width: 480px) {
  .gallery {
    grid-template-columns: 1fr; /* Jedna kolona na malim ekranima */
    gap: 10px;
  }

  .clipped-border {
    width: 120px; /* Još manja širina za mobilne uređaje */
    height: 120px;
  }

  .clipped-border h3 {
    font-size: 0.8rem; /* Još manji tekst */
  }
}