/**
* Block Name: teaser_cards
*/
section.teaser_cards .swiper-container {
  overflow: hidden;
}
/* Layout for Block and Swiper */
section.teaser_cards .block .row.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
}

section.teaser_cards .swiper-slide {
  transition: all 300ms ease-in-out;
  height: auto;
}

.swiper-button-lock {
  display: block;
}

/* Card Wrapper Styling */
section.teaser_cards .card_wrapper {
  min-height: 566px;
  position: relative;
  transition: all 300ms ease-in-out;
  border-bottom: 1px solid var(--ecru);
}

/* Background Color Variants */
section.teaser_cards .card_wrapper.weiss {
  background-color: #fff;
}

section.teaser_cards .card_wrapper.ecru {
  background-color: var(--ecru);
  padding: 30px;
}

section.teaser_cards .card_wrapper.ecru:hover {
  text-decoration: none;
}

/* Image Wrapper */
section.teaser_cards .card_wrapper.weiss .image_wrapper {
  height: 400px;
  min-height: 400px;
}

section.teaser_cards .card_wrapper.ecru .image_wrapper {
  height: 300px;
  overflow: hidden;
  transition: all 300ms ease-in-out;
}

section.teaser_cards .card_wrapper.ecru .image_wrapper img {
  transition: transform 300ms ease-in-out;
  transform: scale(1.05);
}

section.teaser_cards .card_wrapper.ecru:hover .image_wrapper img {
  transform: scale(1);
}

/* Content Wrapper */
section.teaser_cards .content_wrapper {
  height: 35%;
  flex-grow: 1;
  transition: all 500ms ease-in-out;
}

section.teaser_cards .card_wrapper.ecru:hover .content_wrapper {
  height: 60%;
}

section.teaser_cards .swiper-slide .content_wrapper {
  gap: 15px;
}

/* Button and SVG Animations */



section.teaser_cards .card_wrapper .btn-secondary svg,
section.teaser_cards .card_wrapper .btn-secondary svg path {
  transition: all 300ms ease-in-out;
}

section.teaser_cards .card_wrapper:hover .btn-secondary svg {
  transform: translateX(5px);
}

/* Swiper Navigation */
section.teaser_cards .swiper_nav {
  gap: 22px;
  position: relative;
  z-index: 9;
}

section.teaser_cards .swiper_nav .button-prev svg circle,
section.teaser_cards .swiper_nav .button-next svg circle {
  fill: transparent;
  transition: all 300ms ease-in-out;
}

section.teaser_cards .swiper_nav .button-prev svg path,
section.teaser_cards .swiper_nav .button-next svg path {
  transition: all 300ms ease-in-out;
}

section.teaser_cards .swiper_nav .button-prev:hover svg circle,
section.teaser_cards .swiper_nav .button-next:hover svg circle {
  fill: var(--sandbeige);
}

section.teaser_cards .swiper_nav .button-prev:hover svg path,
section.teaser_cards .swiper_nav .button-next:hover svg path {
  fill: #fff;
}

/* Color Variants for Hover */
section.teaser_cards .card_wrapper.ecru:hover a {
  color: var(--minzgrun);
}

section.teaser_cards .card_wrapper.ecru:hover .btn-secondary {
  color: var(--minzgrun);
}

section.teaser_cards .card_wrapper.ecru:hover .btn-secondary svg path {
  fill: var(--minzgrun);
}

section.teaser_cards .card_wrapper.weiss .text {
  opacity: 0.5;
}

section.teaser_cards .card_wrapper.weiss:hover .btn-secondary {
  color: var(--minzgrun);
}

section.teaser_cards .card_wrapper.weiss:hover .btn-secondary svg path {
  fill: var(--minzgrun);
}

/* Swiper Gradient Overlay */
section.teaser_cards.gradient .js_swiper:before,
section.teaser_cards.gradient .js_swiper:after {
  content: "";
  position: absolute;
  height: 90%;
  width: 200px;
  bottom: 0;
  display: block;
  opacity: 1;
  transition: 0.3s linear;
}

section.teaser_cards.gradient .js_swiper:before {
  left: 0;
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.8) 0%,
    rgba(255, 255, 255, 0.5) 50%,
    rgba(255, 255, 255, 0) 100%
  );
  z-index: 2;
}

section.teaser_cards.gradient .js_swiper:after {
  right: 0;
  background: linear-gradient(
    270deg,
    rgba(255, 255, 255, 0.8) 0%,
    rgba(255, 255, 255, 0.5) 50%,
    rgba(255, 255, 255, 0) 100%
  );
  z-index: 2;
}

/* Team link */

section.teaser_cards .btn-primary {
  max-width: max-content;
  display: flex;
  flex-direction: row;
  align-items: center;
}

section.teaser_cards .btn-primary::after {
  position: relative;
  content: "";
  background-image: url("data:image/svg+xml,%3Csvg width='24' height='25' viewBox='0 0 24 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8.01663 21.3096L6.95312 20.2461L15.1974 12.0018L6.95312 3.75759L8.01663 2.69409L17.3244 12.0018L8.01663 21.3096Z' fill='%2334563E'/%3E%3C/svg%3E%0A");
  height: 24px;
  width: 24px;
  position: relative;
  display: inline-block;
  top: 0;
  transition: 300ms ease-in-out;
}

section.teaser_cards .btn-primary:hover::after {
  transform: translateX(3px);
}

/* Responsive Adjustments */
@media (max-width: 1199px) {
  section.teaser_cards.gradient .js_swiper:before,
  section.teaser_cards.gradient .js_swiper:after {
    width: 100px;
  }
}

@media (max-width: 992px) {
  section.teaser_cards.gradient .js_swiper:before,
  section.teaser_cards.gradient .js_swiper:after {
    width: 50px;
  }

  section.teaser_cards .block .row.grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 767px) {
  section.teaser_cards .block .row.grid {
    grid-template-columns: 1fr;
    padding: 0 15px;
    gap: 15px;
  }

  section.teaser_cards .block .row.grid .mb_30 {
    margin-bottom: 15px;
  }

  section.teaser_cards .teaser-card {
    height: auto !important;
  }

  section.teaser_cards .card_wrapper {
    min-height: auto;
  }

  section.teaser_cards .card_wrapper.ecru {
    padding: 15px;
  }

  section.teaser_cards .content_wrapper {
    height: 100%;
  }

  section.teaser_cards .block .btn-secondary {
    padding: 0;
  }
}