/* Image optimization CSS */

/* Ensure all images use proper loading attributes */
img {
  loading: lazy;
  decoding: async;
}

/* Critical images should load eagerly */
img[fetchpriority="high"],
img.hero-image,
img.logo {
  loading: eager;
}

/* Responsive image container */
.responsive-image-container {
  position: relative;
  overflow: hidden;
}

.responsive-image-container img {
  width: 100%;
  height: auto;
  object-fit: cover;
}

/* Optimize gallery images */
.epyt-gallery-img {
  background-size: cover !important;
  background-position: center !important;
  will-change: transform;
}

/* Loader optimization */
.loader-gif {
  width: 100px;
  height: 75px;
  object-fit: contain;
}

/* Logo optimization */
.navbar-header .logo img {
  width: auto;
  height: 30px;
  object-fit: contain;
}

/* Footer triangles optimization */
.triangles {
  width: auto;
  height: 81px;
  object-fit: contain;
}

/* Gallery image optimization */
.epyt-gallery-img {
  background-size: cover !important;
  background-position: center !important;
  will-change: transform;
  contain: layout style paint;
}

/* Sports block image optimization */
.sports-block img {
  width: 242px;
  height: 183px;
  object-fit: cover;
  object-position: center;
}

/* Arrow image optimization */
.arrow {
  width: 15px;
  height: 18px;
  object-fit: contain;
}

/* Navigation arrow optimization */
.arrImg, .arrImgLeft {
  object-fit: contain;
}

/* Banner optimization */
.banner {
  position: relative;
  overflow: hidden;
  height: 593px;
}

.banner .layer {
  height: 593px;
}

/* Grid item heights */
.bs3-grid-builder-child-item {
  /* min-height: 299px; */
}

/* Responsive image sizes */
@media (max-width: 576px) {
  .sports-block img {
    width: 183px;
    height: 120px;
  }
  .banner, .banner .layer {
    height: 400px;
  }
}

@media (max-width: 992px) {
  .sports-block img {
    width: 242px;
    height: 183px;
  }
  .banner, .banner .layer {
    height: 500px;
  }
}