.orient-slider {
  margin-bottom: 10px;
  position: relative;
  width: 100%;
  /* Exact aspect ratio of banners 1920/345 = 5.565 */
  aspect-ratio: 1920/345;
  /* Smooth transition */
  transition: opacity 0.3s ease;
  /* Skeleton loader */
  background: linear-gradient(-90deg, #f0f0f0 0%, #e0e0e0 50%, #f0f0f0 100%);
  background-size: 400% 400%;
  animation: skeleton-loading 1.5s ease-in-out infinite;
  border-radius: 8px;
  overflow: hidden;
}

/* Fallback for browsers without aspect-ratio support */
@supports not (aspect-ratio: 1920/345) {
  .orient-slider {
    height: 0;
    /* 345/1920 = 0.1797 = 17.97% */
    padding-bottom: 17.97%;
  }
}

/* Skeleton animation */
@keyframes skeleton-loading {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* After initialization remove skeleton but keep exact proportions */
.orient-slider.swiper-initialized {
  background: none;
  animation: none;
  border-radius: 0;
  /* Keep aspect-ratio! */
  aspect-ratio: 1920/345;
}

@supports not (aspect-ratio: 1920/345) {
  .orient-slider.swiper-initialized {
    padding-bottom: 17.97%;
  }
}

/* Swiper containers */
.orient-slider .swiper-wrapper {
  width: 100%;
  height: 100%;
}

.orient-slider .swiper-slide {
  width: 100%;
  height: 100%;
}

.orient-slider .swiper-slide a {
  display: block;
  width: 100%;
  height: 100%;
}

/* Images - exact container filling */
.orient-slider .swiper-slide img,
#banner img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* In case the image slightly differs */
  display: block;
}

/* Navigation arrows */
.orient-slider .slide-arrows {
  position: absolute;
  top: 50%;
  z-index: 1;
  display: flex;
  justify-content: space-between;
  width: 100%;
  height: 1px;
  padding: 0 5px;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.orient-slider.swiper-initialized .slide-arrows {
  opacity: 1;
}

.orient-slider .slide-arrow {
  opacity: 1;
  width: 52px;
  display: block;
  background: rgba(0, 0, 0, 0.1);
  height: 50px;
  line-height: 50px;
  border-radius: 5px;
  text-align: center;
}

.orient-slider .slide-arrow > span {
  width: 30px;
  line-height: 50px;
  display: inline-block;
  margin: auto;
  background-position: center;
  background-repeat: no-repeat;
}

.orient-slider .slide-arrow.slide-prev span {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' viewBox='0 0 8 8'%3e%3cpath d='M5.25 0l-4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5-1.5z'/%3e%3c/svg%3e");
}

.orient-slider .slide-arrow.slide-next span {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' viewBox='0 0 8 8'%3e%3cpath d='M2.75 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z'/%3e%3c/svg%3e");
}

/* Override blue swiper nav arrows */
.swiper-button-next, .swiper-button-prev {
  font-size: 0 !important;
  color: rgba(255, 255, 255, 0) !important;
}