.ce-hover-card-carousel {
  position: relative;
  width: 100%;
  overflow: hidden;
  box-sizing: border-box;
}

.ce-hover-card-carousel *,
.ce-hover-card-carousel *::before,
.ce-hover-card-carousel *::after {
  box-sizing: border-box;
}

.ce-hcc-swiper {
  width: 100%;
  overflow: hidden;
}

.ce-hcc-card {
	--ce-hcc-logo-size: 118px;
	--ce-hcc-logo-bottom: 110px;
	--ce-hcc-line-offset: 0px;
	--ce-hcc-logo-hover-shift: 88px;
	position: relative;
	display: block;
	width: 100%;
  height: 560px;
  overflow: hidden;
  background: #000;
  isolation: isolate;
}

.ce-hcc-image {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
  width: 100%;
  height: 100% !important;
  object-fit: cover;
  object-position: center;
  transform: scale(1);
  transition: transform 700ms ease, filter 700ms ease;
}

.ce-hcc-shade,
.ce-hcc-hover-shade {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

.ce-hcc-shade {
  --ce-hcc-overlay-top: rgba(0, 0, 0, 0);
  --ce-hcc-overlay-bottom: rgba(0, 0, 0, 0.78);
  background: linear-gradient(
    180deg,
    var(--ce-hcc-overlay-top) 28%,
    var(--ce-hcc-overlay-bottom) 100%
  );
}

.ce-hcc-hover-shade {
  --ce-hcc-hover-overlay-bottom: rgba(0, 0, 0, 0.88);
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0) 20%,
    var(--ce-hcc-hover-overlay-bottom) 100%
  );
  opacity: 0;
  transition: opacity 420ms ease;
}

.ce-hcc-marker {
  position: absolute;
  left: 0;
  right: 0;
  bottom: var(--ce-hcc-logo-bottom);
  z-index: 3;
  height: var(--ce-hcc-logo-size);
  transform: translate3d(0, 0, 0);
  transition: transform 420ms ease;
  pointer-events: none;
}

.ce-hcc-line {
  position: absolute;
  left: 0;
  right: 0;
  top: calc((var(--ce-hcc-logo-size) / 2) + var(--ce-hcc-line-offset));
  z-index: 0;
  display: block;
  height: 1px;
  background: #d7b83f;
  opacity: 0.55;
  pointer-events: none;
}

.ce-hcc-logo-wrap {
  position: absolute;
  left: 50%;
  bottom: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--ce-hcc-logo-size);
	height: var(--ce-hcc-logo-size);
	aspect-ratio: 1;
	padding: 18px;
	background: #fff;
	transform: translate3d(-50%, 0, 0);
}

.ce-hcc-logo {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.ce-hcc-content {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% - (var(--ce-hcc-logo-bottom) + var(--ce-hcc-logo-hover-shift)) + 18px);
  bottom: 0;
  z-index: 4;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: 0 24px 24px;
  text-align: center;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translate3d(0, 22px, 0);
  transition: opacity 420ms ease, transform 420ms ease, visibility 420ms ease;
}

.ce-hcc-title,
.ce-hcc-desc {
  margin: 0;
  color: #d7b83f;
}

.ce-hcc-title {
  font-size: 26px;
  font-weight: 800;
  line-height: 1.16;
}

.ce-hcc-desc {
  margin-top: 6px;
  font-size: 18px;
  font-weight: 500;
  line-height: 1.4;
}

.ce-hcc-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 18px;
  padding: 10px 20px;
  border-radius: 999px;
  background: #d7b83f;
  color: #111;
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
  transition: background-color 220ms ease, color 220ms ease,
    transform 220ms ease;
}

.ce-hcc-button:hover,
.ce-hcc-button:focus {
  background: #fff;
  color: #111;
  transform: translateY(-1px);
  text-decoration: none;
}

.ce-hcc-reveal-hover .ce-hcc-card:hover .ce-hcc-content,
.ce-hcc-reveal-hover .ce-hcc-card:focus-within .ce-hcc-content,
.ce-hcc-reveal-hover_active .ce-hcc-card:hover .ce-hcc-content,
.ce-hcc-reveal-hover_active .ce-hcc-card:focus-within .ce-hcc-content,
.ce-hcc-reveal-always .ce-hcc-content {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translate3d(0, 0, 0);
}

.ce-hcc-reveal-hover .ce-hcc-card:hover .ce-hcc-hover-shade,
.ce-hcc-reveal-hover .ce-hcc-card:focus-within .ce-hcc-hover-shade,
.ce-hcc-reveal-hover_active .ce-hcc-card:hover .ce-hcc-hover-shade,
.ce-hcc-reveal-hover_active .ce-hcc-card:focus-within .ce-hcc-hover-shade,
.ce-hcc-reveal-always .ce-hcc-hover-shade {
	opacity: 1;
}

.ce-hcc-reveal-hover .ce-hcc-card:hover .ce-hcc-marker,
.ce-hcc-reveal-hover .ce-hcc-card:focus-within .ce-hcc-marker,
.ce-hcc-reveal-hover_active .ce-hcc-card:hover .ce-hcc-marker,
.ce-hcc-reveal-hover_active .ce-hcc-card:focus-within .ce-hcc-marker,
.ce-hcc-reveal-always .ce-hcc-marker {
	transform: translate3d(0, calc(-1 * var(--ce-hcc-logo-hover-shift)), 0);
}

.ce-hcc-anim-slide_up .ce-hcc-content {
  transform: translate3d(0, 44px, 0);
}

.ce-hcc-anim-zoom .ce-hcc-content {
  transform: translate3d(0, 16px, 0) scale(0.94);
}

.ce-hcc-anim-zoom.ce-hcc-reveal-hover .ce-hcc-card:hover .ce-hcc-content,
.ce-hcc-anim-zoom.ce-hcc-reveal-hover .ce-hcc-card:focus-within .ce-hcc-content,
.ce-hcc-anim-zoom.ce-hcc-reveal-hover_active .ce-hcc-card:hover .ce-hcc-content,
.ce-hcc-anim-zoom.ce-hcc-reveal-hover_active
  .ce-hcc-card:focus-within
  .ce-hcc-content,
.ce-hcc-anim-zoom.ce-hcc-reveal-always .ce-hcc-content {
  transform: translate3d(0, 0, 0) scale(1);
}

.ce-hcc-pagination {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 34px;
  line-height: 1;
}

.ce-hcc-pagination.swiper-pagination-bullets.swiper-pagination-horizontal {
  position: relative;
  bottom: auto;
  left: auto;
  width: 100%;
}

.ce-hcc-pagination .swiper-pagination-bullet {
  width: 12px;
  height: 12px;
  margin: 0 !important;
  border-radius: 999px;
  background: #fff;
  opacity: 1;
  transition: width 220ms ease, background-color 220ms ease,
    transform 220ms ease;
}

.ce-hcc-pagination .swiper-pagination-bullet-active {
  width: 46px;
  background: #d7b83f;
}

.ce-hcc-arrow {
  position: absolute;
  top: 50%;
  z-index: 8;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid currentColor;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.44);
  color: #d7b83f;
  font-size: 36px;
  line-height: 1;
  cursor: pointer;
  transform: translateY(-50%);
  transition: background-color 220ms ease, transform 220ms ease;
}

.ce-hcc-arrow:hover,
.ce-hcc-arrow:focus {
  background: rgba(0, 0, 0, 0.78);
  transform: translateY(-50%) scale(1.05);
}

.ce-hcc-prev {
  left: 18px;
}

.ce-hcc-next {
  right: 18px;
}

@media (max-width: 767px) {
  .ce-hcc-title {
    font-size: 22px;
  }

  .ce-hcc-desc {
    font-size: 15px;
  }

  .ce-hcc-arrow {
    width: 38px;
    height: 38px;
    font-size: 30px;
  }
}