/* Osnovna klasa */
.asp-ratio {
  position: relative;
  width: 100%;
  overflow: hidden;
  /* background-color: lightgray; */
}

/* Fallback za padding-hack */
.asp-ratio::before {
  content: "";
  display: block;
  overflow: hidden;
  padding-top: 100%;
}

/* Specifični omjeri sa modernim pristupom i fallback-om */

/* Omjer kvadrat 1:1 */
.asp-ratio-1-1 {
  aspect-ratio: 1 / 1; /* Moderni pristup */
}
.asp-ratio-1-1::before {
  padding-top: 100%; /* Fallback za starije pretraživače */
}

/* Horizontalno 4:3 */
.asp-ratio-4-3 {
  aspect-ratio: 4 / 3;
}

.asp-ratio-4-3::before {
  padding-top: 75%;
}

/* Vertikalno 4:3 (3:4) */
.asp-ratio-3-4 {
  aspect-ratio: 3 / 4;
}

.asp-ratio-3-4::before {
  padding-top: 133.33%;
}

/* Horizontalno 16:9 */
.asp-ratio-16-9 {
  aspect-ratio: 16 / 9;
}
.asp-ratio-16-9::before {
  padding-top: 56.25%;
}

/* Vertikalno 16:9 (9:16) */
.asp-ratio-9-16 {
  aspect-ratio: 9 / 16;
}

.asp-ratio-9-16::before {
  padding-top: 177.78%; /* (16 / 9) * 100 */
}

/* Horizontalno 3:2 */
.asp-ratio-3-2 {
  aspect-ratio: 3 / 2;
}

.asp-ratio-3-2::before {
  padding-top: 66.67%;
}

/* Vertikalno 3:2 (2:3)*/
.asp-ratio-2-3 {
  aspect-ratio: 2 / 3;
}

.asp-ratio-2-3::before {
  padding-top: 150%;
}

/* Horizontalno 5:4 */
.asp-ratio-5-4 {
  aspect-ratio: 5 / 4;
}
.asp-ratio-5-4::before {
  padding-top: 80%;
}

/* Vertikalno 4:5 (od 5:4) */
.asp-ratio-4-5 {
  aspect-ratio: 4 / 5;
}
.asp-ratio-4-5::before {
  padding-top: 125%;
}

/* Horizontalno 21:9 */
.asp-ratio-21-9 {
  aspect-ratio: 21 / 9;
}
.asp-ratio-21-9::before {
  padding-top: 42.86%;
}

/* Vertikalno 9:21 (od 21:9) */
.asp-ratio-9-21 {
  aspect-ratio: 9 / 21;
}
.asp-ratio-9-21::before {
  padding-top: 233.33%;
}

/* Horizontalno 2:1 */
.asp-ratio-2-1 {
  aspect-ratio: 2 / 1;
}
.asp-ratio-2-1::before {
  padding-top: 50%;
}

/* Vertikalno 1:2 (od 2:1) */
.asp-ratio-1-2 {
  aspect-ratio: 1 / 2;
}
.asp-ratio-1-2::before {
  padding-top: 200%;
}

.asp-ratio > *,
.asp-ratio img,
.bg-overlay::before {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
}

.asp-ratio img {
  object-fit: cover;
  border-radius: inherit;
}

.bg-overlay::before {
  content: "";
  background: rgba(0, 0, 0, 0.3);
  pointer-events: auto;
  z-index: 1;
  transition: background 0.3s ease;
}

.bg-overlay:hover::before {
  background: transparent;
}

.text-overlay {
  position: relative;
  z-index: 2;
  color: white;
  pointer-events: none;
}