.ces-swiper-wrap {

  position: relative;

  width: 100%;

}



.ces-has-ratio .ces-swiper { height: 100%; }



.ces-swiper {

  width: 100%;

  height: 100%;

  position: relative;

  overflow: clip;

}



.ces-swiper .swiper-slide {

  position: relative;

  width: 100%;

  height: 100%;

  background: #000;

}



.ces-slide-bg {

  position: absolute;

  inset: 0;

  background-size: cover;

  background-position: center;

  z-index: 1;

}



.ces-bottom-bar {

  position: absolute;

  left: 0; right: 0; bottom: 0;

  z-index: 2;

  background: rgba(118, 109, 91, 0.8);

  min-height: 166px;

  display: grid;

  align-items: center;

}



.ces-bottom-inner {

  display: grid;

  grid-template-columns: 1fr auto;

  gap: 16px;

  padding: 12px 60px;

}



.ces-left {

  display: flex;

  align-items: center;

  gap: 20px;

  flex-wrap: wrap;

  padding-left: 100px;

}



.ces-date {

  display: inline-block;

  font-family: "Manrope", Sans-serif;

  font-weight: 200;

  font-size: 102px;

  letter-spacing: .02em;

  color: #fff;

}



.ces-title {

  color: #fff;

  font-family: "Manrope", Sans-serif;

  font-weight: 200;

  font-size: 42px;

  text-decoration: none;

  line-height: 1.2;

}

.ces-title:hover { text-decoration: none; color:#FFFFFF; }



.ces-bottom-inner:has(.ces-title:hover) .ces-cta { transform: translateX(25px); }

.ces-bottom-inner:has(.ces-title:focus-visible) .ces-cta { transform: translateX(25px); }



.ces-right {

  display: flex;

  align-items: center;

  gap: 80px;

}



.ces-cta {

  display: inline-grid;

  place-items: center;

  width: 72px;

  height: 72px;

  background: transparent;

  border-radius: 0;

  text-decoration: none;

  overflow: visible;

  transition: .3s all ease;

}



.ces-cta svg {

  display: block;

  width: 100%;

  height: 100%;

}



.ces-cta:hover { transform: translateX(25px); }



.ces-pagination {

  position: static;

  display: flex;

  flex-direction: column;

  gap: 12px;

  width: auto;

}



.ces-pagination .swiper-pagination-bullet {

  width: 12px;

  height: 12px;

  border-radius: 999px;

  background: #FFFFFF;

  opacity: 1;

  transition: transform .3s ease, background .3s ease;

}



.ces-pagination .swiper-pagination-bullet-active {

  background: #9E0303;

  border: 2px solid #FFFFFF;

}



/* ===== Smaller desktops (≤ 1400px) ===== */

@media (max-width: 1400px) {

  .ces-bottom-inner { padding: 12px 48px; }

  .ces-left { padding-left: 0px; gap: 40px; }

  .ces-date { font-size: 88px; }

  .ces-title { font-size: 36px; }

  .ces-right { gap: 150px; }

  .ces-cta { width: 68px; height: 68px; }

}



/* ===== Laptops (≤ 1200px) ===== */

@media (max-width: 1200px) {

  .ces-bottom-bar { min-height: 140px; }

  .ces-bottom-inner { padding: 12px 40px; gap: 14px; }

  .ces-left { padding-left: 0px; gap: 36px; }

  .ces-date { font-size: 72px; }

  .ces-title { font-size: 32px; }

  .ces-right { gap: 120px; }

  .ces-cta { width: 64px; height: 64px; }

  .ces-pagination { gap: 10px; }

}



/* ===== Tablets landscape (≤ 992px) ===== */

@media (max-width: 992px) {

  .ces-bottom-bar { min-height: 120px; }

  .ces-bottom-inner { padding: 12px 32px; gap: 12px; }

  .ces-left { padding-left: 0px; gap: 32px; }

  .ces-date { font-size: 56px; }

  .ces-title { font-size: 28px; }

  .ces-right { gap: 80px; }

  .ces-cta { width: 56px; height: 56px; }

  .ces-pagination .swiper-pagination-bullet { width: 11px; height: 11px; }

  .ces-bottom-inner:has(.ces-title:hover) .ces-cta,

  .ces-bottom-inner:has(.ces-title:focus-visible) .ces-cta,

  .ces-cta:hover { transform: translateX(20px); }

}



/* ===== Tablets portrait (≤ 768px) ===== */

@media (max-width: 768px) {

  .ces-bottom-bar { min-height: 110px; }

  .ces-bottom-inner { padding: 10px 24px; gap: 10px; }

  .ces-left { padding-left: 0px; gap: 24px; }

  .ces-date { font-size: 44px; }

  .ces-title { font-size: 22px; }

  .ces-right { gap: 48px; }

  .ces-cta { width: 52px; height: 52px; }

  .ces-pagination .swiper-pagination-bullet { width: 10px; height: 10px; }

  .ces-bottom-inner:has(.ces-title:hover) .ces-cta,

  .ces-bottom-inner:has(.ces-title:focus-visible) .ces-cta,

  .ces-cta:hover { transform: translateX(16px); }

  .ces-news-card { width: 90%; margin-left: auto; margin-right: auto; }

  .ces-news-arrow.ces-next { right: -15px !important; }

  .ces-news-arrow.ces-prev { left: -15px !important; }

}



/* ===== Phones (≤ 576px) ===== */

@media (max-width: 576px) {

  .ces-bottom-bar { min-height: 100px; }

  .ces-bottom-inner { padding: 10px 16px; gap: 8px; }

  .ces-left { padding-left: 0px; gap: 10px; }

  .ces-date { font-size: 34px; }

  .ces-title { font-size: 18px; }

  .ces-right { gap: 20px; }

  .ces-cta { width: 44px; height: 44px; }

  .ces-pagination .swiper-pagination-bullet { width: 9px; height: 9px; }

  .ces-bottom-inner:has(.ces-title:hover) .ces-cta,

  .ces-bottom-inner:has(.ces-title:focus-visible) .ces-cta,

  .ces-cta:hover { transform: translateX(12px); }

}