* {
  box-sizing: border-box;
}

.post-carousel {
  height: 50vh;
  width: 100%;
  position: relative;
  overflow: hidden;
}

.swiper-wrapper {
  height: 100%;
}

.swiper-slide {
  position: relative;
  height: 100%;
  display: flex;
  align-items: end;
}

.swiper-slide .container {
  padding: 0;
}

.swiper-slide img {
  display: block;
  height: 100%;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  object-fit: cover;
  object-position: center;
  z-index: 0;
}

.inner {
  z-index: 10;
  position: relative;
  margin-bottom: 0;
  background-color: rgba(78, 15, 250, 0.25);
  padding: 0.4rem;
}

.swiper-slide h2 {
  margin-top: 0;
  color: #fff;
}

.swiper-slide a {
  font-weight: bold;
  color: #fff;
}

/* Fade effect */
.swiper-slide {
  transition: opacity 1.5s ease;
}

/* -----------------------------
   NAVIGATION ARROWS (OVERLAY)
   ----------------------------- */

/* Make navigation overlay full height */

/* Center arrows vertically */
.navigation {
  height: 100%;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  align-items: center; /* <-- center vertically */
  pointer-events: none; /* <-- allow clicks to pass through */
}
.navigation .container {
  pointer-events: auto;
  display: flex;
  justify-content: space-between;
  padding: 0;
}

.post-carousel .swiper-button-prev,
.post-carousel .swiper-button-next {
  position: relative;
  z-index: 20;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Arrow color */
.post-carousel .swiper-button-prev::after,
.post-carousel .swiper-button-next::after {
  color: #fff;
  font-size: 20px;
}