/* ___ 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: 10px;} 
.banner .content > :first-child * {color: var(--c-primary);}
.banner .content p {max-height: 175px;}
.banner .slick-arrow {position: absolute; top: 48%; width: 50px; height: 50px; z-index: 50;}
.banner .slick-arrow img {width: 30px; height: 30px; filter: invert(1);}
.banner .prev-btn {left: 2%;}
.banner .next-btn {right: 2%;}

/* ___ SINGLE ___ */
.single {padding-block: 37px;}
.single .content p {font-size: calc(var(--fs-base, 16px) + 2px); margin-bottom: 15px; color: #000; line-height: 1.4;}
.single .content > h2 {font-size: var(--fs-lg, 32px);}
.single .content > h3 {font-size: var(--fs-md, 26px);}
.single .content > :where(h2, h3) {margin-bottom: 15px; line-height: 1.3;}
.single .content > :where(h4, h5) {font-size: var(--fs-sm, 20px); margin-bottom: 15px;}
.single .content > :where(ul, ol) {margin-bottom: 8px;}
.single .container :where(ul, ol) {margin-bottom: 15px;}
.single .content > ul li {list-style: disc inside;}
.single .content > ol li {list-style: decimal inside;}
.single .content li {line-height: 1.5;}
.single .content li:not(:last-of-type) {margin-bottom: 6px;}
.single .content > p a {color: var(--c-primary); display: inline-block;}
.single .content > p strong {font-weight: 800; font-family: var(--c-secondary);} 

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

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

@media only screen and (max-width: 575px) {
    .banner .images picture img {max-height: 400px;}
    .banner .content {padding: 24px;}
    .banner .slick-arrow {top: auto; bottom: 4%; margin: 0;}
}

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