/* ___ BANNER ___ */
.banner .container {max-width: 100%; padding: 0;}
.banner .wrapper {position: relative;}
.banner .images picture img {width: 100%; height: 780px; object-fit: cover;}
.banner .main {position: absolute; bottom: 0; left: 0; right: 0; display: flex; align-items: flex-end; width: 100%; max-width: var(--container-size); height: 100%; padding: 42px var(--container-padding); margin-inline: auto;}
.banner .content {max-width: 450px; background-color: var(--_c-bg-white); padding: 36px; box-shadow: 0px 4px 4px rgba(0, 0, 0, 25%); border: 2px solid #000; border-radius: 22px;}
.banner .content > :first-child  {font-size: var(--fs-xl, 42px); font-weight: 800; line-height: 1; margin-bottom: 18px;} 
.banner .content > :first-child * {color: var(--c-primary);}
.banner .content li {line-height: 1.4;}
.banner .content li:not(:last-of-type) {margin-bottom: 15px;}
.banner .slick-arrow {display: none !important;}

@media only screen and (max-width: 991px) {
    .banner .images picture img {max-height: 540px;}
    .banner .content {padding: 30px;}
}

@media only screen and (max-width: 767px) {
    .banner .main {height: 100%; align-items: center; justify-content: center; padding-block: 0;}
}

@media only screen and (max-width: 575px) {
    .banner .images picture img {max-height: 400px;}
    .banner .content {padding: 24px;}
}

@media only screen and (max-width: 475px) {
    .banner .images picture img {max-height: 350px;}
}