/* ___ 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 {display: none !important;}

/* ___ BLOG ___ */
.blog {padding-block: 55px;}
.blog .wrapper {display: grid; grid-template-columns: repeat(2 ,1fr); gap: 33px;}
.blog .image {overflow: hidden; border-radius: 28px;} 
.blog .image img {height: 446px; object-fit: cover; border-radius: 28px;}
.blog .post > :nth-child(2) {display: block; color: var(--c-primary); font-family: var(--ff-primary); font-size: var(--fs-base); font-weight: 700; margin-block: 15px 6px;}
.blog .post > :nth-child(3) * {display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; text-overflow: ellipsis; overflow: hidden; color: #000; font-size: var(--fs-md); line-height: 1.2; font-family: var( --ff-primary);} 
.blog .post > :nth-child(4) {display: block; font-family: var(--ff-primary); color: var(--c-lg-dark); margin-top: 8px; font-weight: 600;}
.blog .post:hover > :nth-child(2) {color: #000; transition: var(--transition);}
.blog .post:hover > :nth-child(3) * {color: var(--c-primary); transition: var(--transition);}
.blog .post:hover .image img {transform: scale(1.1); transition: var(--transition);}
.blog .btn__primary {width: 170px; border-color: transparent; border-radius: 12px; margin: 30px auto 0;}

@media only screen and (max-width: 1200px) {
    .blog .image img {height: 360px;}
}

@media only screen and (max-width: 991px) {
    .banner .images picture img {max-height: 540px;}
    .banner .content {padding: 30px;}
    .blog {padding-block: 40px;}
    .blog .wrapper {gap: 20px;}
    .blog .image img {height: 250px;}
    .blog .post > :nth-child(3) {font-size: calc(var(--fs-sm, 20px) + 2px);}
}

@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;}
    .blog {padding-block: 30px;}
    .blog .wrapper {grid-template-columns: 1fr; gap: 18px;}
    .blog .image img {height: auto;}
    .blog .btn__primary {width: 120px;}
}

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