.banner__img {
  width: 100%;
}

.banner__content {
  padding: 3rem 4.8rem 4.4rem;

}

@media (min-width: 992px) {
  .banner__content {
    position: absolute;
    top: 50%;
    z-index: 6;
  }
}

@media (min-width: 992px) {
  .banner__content--right {
    right: 10.72916667%;
    -webkit-transform: translate(0, calc(-50% - 0.8rem));
    -ms-transform: translate(0, calc(-50% - 0.8rem));
    transform: translate(0, calc(-50% - 0.8rem));
    max-width: 62ch;
  }

  .banner__content--left {
    left: 11.35%;
    -webkit-transform: translate(0, -50%);
    -ms-transform: translate(0, -50%);
    transform: translate(0, -50%);
    max-width: 36rem;
  }

  .banner__content--center {
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    max-width: 36rem;
  }
}

@media (min-width: 992px) {
  .banner__content--text-white {
    color: var(--yvel-white);
  }

  .banner__content--text-white .button--outline {
    --button-border-color: var(--yvel-white);
    --button-color: var(--yvel-white);
  }

  .banner__content--text-white .button--outline:hover {
    --button-bg: var(--yvel-white);
    --button-color: var(--yvel-black);
    --button-border-color: var(--yvel-white);
  }
}

@media (max-width: 767.98px) {
  .banner__content--content {
    padding: 2.3rem 2rem;
  }

  .banner__content--content .banner__body-text {
    line-height: 2;
    margin-bottom: 2.3rem;
  }
}

.banner__caption {
  font-size: 1.6rem;
}

@media (min-width: 992px) {
  .banner__caption {
    font-size: 1.8rem;
    margin-bottom: -0.5rem;
  }
}

.banner__img {
  width: 100%;
}

.banner__title {
  font-size: 4.8rem;
  line-height: 1;
  margin-bottom: 1.4rem;
}

@media (min-width: 992px) {
  .banner__title {
    font-size: 6.4rem;
    margin-bottom: 1.9rem;
  }
}

.banner__title--small {
  font-size: 2rem;
  line-height: 1.6;
  margin-bottom: 1.1rem;
}

.banner__body-text {
  font: 300 1.6rem/1.75 "Poppins", sans-serif;
  margin-bottom: 2.1rem;
}

@media (min-width: 992px) {
  .banner__body-text {
    line-height: 2;
    margin-bottom: 1.7rem;
  }
}

.banner__body-text p {
  margin: 0;
}

.banner__button {
  min-width: 25.3rem;
}

@media (min-width: 992px) {
  .banner__button.button--small {
    margin-top: 0.6rem;
  }
}

@media (max-width: 575.98px) {
  .banner__button-small {
    --button-font-size: 1.2rem;
    --button-padding: 0.8rem;
    min-width: 12.8rem;
    --button-margin: 1rem 0 0;
  }
}

.collection-anim:after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 9;
  background: url("../../images/collections-mobile.webp") 50% 50%/cover no-repeat;
  -webkit-transition: opacity 0.6s ease-in;
  transition: opacity 0.6s ease-in;
  pointer-events: none;
}

.link.text-art_link {
  font-size: 16px;
  line-height: 35px;
  color: #000;
  font-weight: 400;
}

@media (min-width: 992px) {
  .collection-anim:after {
    background-image: url("../../images/collections.webp");
  }

  .link.text-art_link {
    font-size: 16px;
    line-height: 35px;
    color: #FFFFFF !important;
    font-weight: 400;
  }
}

.collection-anim.anim_active:after {
  opacity: 0;
}