.cards-block {
  min-width: 100vw;
  min-height: 100vh;
}

.cards-block,
.cards-carousel-block {
  overflow-x: clip;
}

.cards-block-cont {
  width: 100%;
  /* height: 100vh; */
  position: sticky;
  left: 0;
  top: calc(((var(--cards-main-texts-height, 0px) * -1) - 80px) + var(--menu-height-with-wpadminbar, 0px) + var(--sticky-h-height, 0px));
  /*top: calc(
    (
      (var(--cards-main-texts-height, 0px) * -1 ) - 80px
    ) + 
    var(--menu-height-with-wpadminbar, 0px) + 
    var(--sticky-h-height, 0px)
  );*/
}

.cards-wrapper {
  height: 70vh;
  --card-max-width: 1130px;
  --max-width-swiper: 1130px;
}

.cards-block-cont h2 {
  padding-bottom: 0;
}

.cards-block-main-texts {
  position: relative;
  text-align: center;
  padding-top: 80px;
  max-width: 900px;
  overflow: visible;
}

.cards-block-main-texts.no-padding {
  padding-top: 0;
}

.cards-block-main-texts a {
  flex-shrink: 0;
}

.cards-block-main-texts .h3,
.cards-block-main-texts .h3-style,
.cards-block-main-texts .h2,
.cards-block-main-texts .h2-style {
  padding-bottom: 0px;
}

.cards-block-main-texts .cta_wrapper {
  padding-top: 24px;
}

.cards-further-wrapper {
  height: calc(100vh - var(--menu-height) - var(--wp-admin--admin-bar--height, 0px)) - var(--sticky-h-height, 0px);
}

.cards-wrapper .card {
  width: 100%;
  max-width: var(--card-max-width);
  border-radius: 24px;
  overflow: hidden;
  background-color: var(--neutral-k1);
}

.cards-block .cards-wrapper .card {
  position: absolute;
  top: 0;
  left: 50vw;
  transform-origin: top center;
  transform: translateX(-50%);
  will-change: transform;
}

.cards-block .cards-wrapper .card:first-child {
  position: relative;
}

.cards-carousel-block {
  overflow-x: clip;
}

.cards-carousel-block .swiper-slide {
  transition: transform 0.8s cubic-bezier(0.25, 1, 0.5, 1),
    opacity 0.8s ease,
    filter 0.8s ease;
  opacity: 0.5;
}

.cards-carousel-block .swiper-slide-active {
  opacity: 1;
  filter: blur(0);
  transform: translateY(0) scale(1);
}

.cards-carousel-block .swiper-slide:not(.swiper-slide-active) {
  transform: translateY(80px) scale(1);
}

.cards-carousel-block .swiper {
  overflow: visible;
  max-width: var(--max-width-swiper);
  opacity: 0;
  visibility: hidden;
}

.cards-carousel-block .cards-wrapper {
  height: fit-content;
  margin-bottom: 160px;
}

.cards-carousel-block.cards-carousel-bg-light .cards-block-main-texts {
  color: var(--neutral-w);
}

.cards-carousel-block.cards-carousel-bg-dark {
  background-color: var(--neutral-w);
}

.cards-carousel-block.cards-carousel-bg-light {
  background-color: var(--neutral-k10);
}

/* ----- APPEAR ANIMATION ----- */

.cards-carousel-block.cards-carousel-bg-light .slider-swiper-arrow .slider-control-btn:focus-visible,
.cards-carousel-block.cards-carousel-bg-light .slider-swiper-arrow .swiper-button-prev:focus-visible,
.cards-carousel-block.cards-carousel-bg-light .slider-swiper-arrow .swiper-button-next:focus-visible {
  outline: solid 3px #005fcc;
}

.cards-carousel-block.cards-carousel-bg-light .slider-swiper-arrow .slider-control-btn svg path {
  fill: var(--neutral-w);
}

.cards-carousel-block .swiper .swiper-slide {
  min-width: var(--card-max-width);
}

.cards-wrapper .card:first-child {
  position: relative;
}

.cards-block .cards-wrapper .card:focus-within {
  filter: brightness(100%) !important;
}

.cards-wrapper .card-texts-wrapper {
  padding: 80px 40px;
}

.cards-wrapper .card-side-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.card-side-curtain {
  z-index: 1;
  background-color: var(--neutral-k1);
}

.cards-wrapper .card-tag {
  background-color: var(--neutral-k9);
  padding: 8px 4px;
  width: fit-content;
}

.cards-carousel-block .slider-swiper-arrow {
  width: calc((var(--max-width-swiper) / 2) + 38px);
  align-self: self-start;
  margin-left: calc((100% - var(--max-width-swiper)) / 2);
}

@media(max-height: 670px) {
  .cards-wrapper {
    --card-max-width: 900px;
    --max-width-swiper: 900px;
  }

  .cards-wrapper .card-side-img {
    max-width: 450px;
  }

  .cards-wrapper .card-texts-wrapper {
    padding: 40px;
  }
}

@media(max-width: 1024px) {

  .cards-block,
  .cards-carousel-block {
    padding: 80px 24px 80px 24px;
    overflow: hidden;
  }

  .cards-block.no-title-no-padding {
    padding-top: 0px;
  }

  .cards-block-cont {
    height: fit-content;
  }

  .cards-wrapper {
    height: fit-content;
    display: flex;
    flex-direction: column;
    gap: 24px;
  }

  .cards-further-wrapper {
    height: fit-content;
    display: flex;
    flex-direction: column;
    gap: 24px;
  }

  .cards-block .cards-wrapper .card,
  .cards-carousel-block .cards-wrapper .card {
    position: relative;
    grid-template-columns: unset;
    grid-template-rows: auto auto;
    order: -1;
    max-width: unset;
    transform: unset;
    left: unset;
    gap: 0;
  }

  .cards-block .cards-wrapper .card .card-side-img,
  .cards-carousel-block .cards-wrapper .card .card-side-img {
    height: 245px;
  }

  .cards-carousel-block .cards-wrapper {
    margin-bottom: 0;
  }


  .card-texts-wrapper .cta_btn {
    width: 100%;
  }

  .cards-wrapper .card .card-texts-wrapper,
  .cards-wrapper .card .card-texts-wrapper .card-texts {
    padding: 0;
    gap: 24px;
  }

  .cards-wrapper .card .card-texts-wrapper {
    padding: 24px 16px;
  }

  .cards-wrapper .card-texts-wrapper {
    grid-row: 2;
  }

  .cards-wrapper .card-side-img {
    grid-row: 1;
    max-width: unset;
    max-height: unset;
  }

  .cards-wrapper .card-side-img .card-tag {
    position: absolute;
    left: 24px;
    top: 24px;
  }

  .cards-carousel-block .swiper {
    margin-left: unset;
    width: 100% !important;
    margin-top: 0;
    max-width: unset;
  }

  .cards-carousel-block .swiper .swiper-slide {
    min-width: unset;
    width: 100% !important;
  }

  .cards-carousel-block .slider-swiper-arrow {
    width: calc((100% / 2) + 38px);
    align-self: self-start;
    margin-left: unset;
  }

  .cards-block-main-texts {
    padding-top: 0px;
  }
}