.teaserimage--4 {
  background-color: var(--clr-tertiary-10);
}

.teaserimage--4 .component__content {
  position: relative;
}

.teaserimage--4 .teaserimage__item {
  display: flex;
  flex-direction: column;
  justify-content: start;
  background-color: white;
  overflow: hidden;

  transform: scale(0.9);
  transform-origin: center;

  transition: transform 600ms ease;
  /*
  margin: 1.25rem;
  transition: margin 600ms ease;
  */
}

.teaserimage--4 .teaserimage__image > * {
  position: relative;
  width: 100%;
  height: 100%;
  display: block;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  background-color: var(--clr-white);
  transform: scale(1);
  transition: transform 600ms ease;
}

.teaserimage--4 .teaserimage__title {
  display: flex;
  flex-direction: column;
  padding: 1.25rem;

  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 9;

  min-height: 135px;
}

.teaserimage--4 .teaserimage__title p {
  font-family: var(--ff-heading);
  font-weight: var(--fw-regular);
  font-size: clamp(1rem, 0.396vw + 0.858rem, 1.25rem);
  line-height: clamp(1rem, 0.396vw + 0.858rem, 1.25rem);
  color: var(--clr-primary);
  text-transform: uppercase;
}

.teaserimage--4 .teaserimage__title span {
  text-shadow: var(--text-shadow);
}

.teaserimage--4 .teaserimage__title span:not(.brand) {
  font-family: var(--ff-heading);
  font-size: clamp(1.5rem, 0.791vw + 1.215rem, 2rem);
  line-height: clamp(1.5rem, 0.791vw + 1.215rem, 2rem);
  font-weight: var(--fw-regular);
  text-transform: uppercase;

  color: var(--clr-white);
}

.teaserimage--4 .teaserimage__text {
  padding: 1.25rem;
  line-height: 1.875rem;
  color: var(--clr-white);
  background-color: var(--clr-secondary-80);
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 9;
  transform: translate3d(0, 100%, 0);
  transition: transform 600ms ease;
}

.teaserimage--4 .teaserimage__text div {
  position: absolute;
  top: calc(1.25rem * -2);
  right: 1.25rem;

  display: flex;
  align-items: center;
  gap: 1rem;
}

.teaserimage--4 .teaserimage__text div span {
  font-size: 1.375rem;
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  opacity: 0;
  transition: opacity 600ms ease;
}

.teaserimage--4 .teaserimage__link {
  position: absolute;
  inset: 0;
  z-index: 10;
  text-indent: -9999px;
}

.teaserimage--4 .teaserimage__item:hover {
  margin: 0;
  transform: scale(1);
}

.teaserimage--4 .teaserimage__item:hover .teaserimage__text {
  transform: translate3d(0, 0, 0);
}

.teaserimage--4 .teaserimage__item:hover .teaserimage__text div span {
  opacity: 1;
}

.teaserimage--4 .teaserimage__item:hover .teaserimage__text div svg {
  color: var(--clr-primary);
}

.teaserimage--4 .teaserimage__item:hover .teaserimage__image > * {
  transform: scale(1.1);
}

.teaserimage--4 .swiper-button-prev,
.teaserimage--4 .swiper-button-next {
  --swiper-theme-color: var(--clr-white);
  --swiper-navigation-size: 2.5rem;

  width: var(--swiper-navigation-size);
  height: var(--swiper-navigation-size);
  margin-top: unset;
  background-color: var(--clr-secondary);

  transition:
    color 600ms ease,
    background-color 600ms ease;
}

.teaserimage--4 .swiper-button-prev {
  /* left: calc((var(--swiper-navigation-size) / -1) - 2.5rem); */
  left: 2.5rem;
}

.teaserimage--4 .swiper-button-next {
  right: 2.5rem;
}

.teaserimage--4 .swiper-button-next:after,
.teaserimage--4 .swiper-button-prev:after {
  font-size: 1.25rem;
}

.teaserimage--4 .swiper-button-prev:hover,
.teaserimage--4 .swiper-button-next:hover {
  --swiper-theme-color: var(--clr-secondary);
  background-color: var(--clr-white);
}

@media (min-width: 992px) {
  /*
  .teaserimage--4 .component__content {
    grid-column: 2 / -1;
  }
  */
  .teaserimage--4 .component__content::after {
    content: '';
    display: block;
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 100%;
    max-width: 158px;
    height: 100%;
    background: linear-gradient(270deg, rgba(242, 246, 249, 1) 30.77%, rgba(242, 246, 249, 0) 100%);
    z-index: 1;
  }
  .teaserimage--4 .swiper-button-prev,
  .teaserimage--4 .swiper-button-next {
    --swiper-navigation-size: 4.125rem;
  }

  .teaserimage--4 .swiper-button-next:after,
  .teaserimage--4 .swiper-button-prev:after {
    font-size: 1.75rem;
  }
}