/* ____ HERO ____ */
.hero {padding-block: 100px; position: relative; background: linear-gradient(to bottom, rgba(36,89,167,0.9), rgba(36,89,167,0.9)), url(../images/blog-bg.webp); background-size: cover; background-position: center; mix-blend-mode: screen; overflow: hidden;}
.hero::before {position: absolute; inset: auto 0 -50px; width: 120px; height: 100px; background-color: #fff; mask: radial-gradient(#0000 71%, #000 72%) 10000% 10000%/99.5% 99.5%; margin-inline: auto; content: '';}
.hero .title {max-width: 80%; text-align: center; margin-inline: auto;}
.hero .title > :first-child {font-size: var(--fs-2xl, 54px); line-height: 1.3; color: #fff;}
.hero .title > :first-child * {display: block; font-size: var(--fs-sm, 20px); font-weight: 700; text-transform: uppercase; color: var(--c-secondary); margin-bottom: 20px;}
.hero .title *::selection {background-color: #fff; color: var(--c-primary);}

/* ____ BLOG ____ */
.blog {padding-block: 70px; --_c-gray-lght: #adadad; --_c-text: #7886a2;}
.blog .wrapper {display: grid; grid-template-columns: repeat(2, 1fr); gap: 40px;}
.blog .post {display: flex; flex-direction: column; gap: 20px;}
.blog .post img {width: 100%; height: 300px; object-fit: cover; object-position: top; border-radius: 10px;}
.blog .post > :nth-child(2) {font-size: calc(var(--fs-lg, 32px) - 2px); font-weight: 700; line-height: 1.3;}
.blog .post:hover > :nth-child(2) {color: var(--c-secondary);}
.blog .post > :nth-child(3) {font-size: var(--fs-2xs, 12px); color: var(--_c-gray-lght);}
.blog .post p {display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.6; color: var(--_c-text);}
.blog .post > :last-child {font-size: var(--fs-xs, 14px); font-weight: 600; text-transform: uppercase; color: var(--c-secondary);}
.blog .post > :last-child:hover {color: var(--c-primary);}
.pagination {display: flex; justify-content: center; gap: 10px; margin-top: 20px;}
.pagination a {color: var(--c-secondary);}
.pagination a:hover {color: var(--c-primary);}
.pagination a.active {color: var(--c-primary);}
.pagination a.active:hover {color: var(--_c-text);}

/* {{{ MEDIA QUERY}}} */
@media only screen and (max-width: 991px) {
    /* Hero */
    .hero {padding-block: 70px;}
    /* Blog */
    .blog {padding-block: 50px;}
    .blog .wrapper {gap: 30px;}
    .blog .post {gap: 15px;}
    .blog .post > :nth-child(2) {font-size: calc(var(--fs-md, 26px) + 2px);}
}

@media only screen and (max-width: 767px) {
    /* Blog */
    .blog .wrapper {grid-template-columns: 1fr;}
    .blog .post img {height: auto;}
}

@media only screen and (max-width: 575px) {
    /* Hero */
    .hero {padding-block: 40px 50px;}
    .hero::before {width: 100px; height: 90px;}
    .hero .title > :first-child {line-height: 1.2;}
    .hero .title > :first-child * {margin-bottom: 10px;}
    /* Blog */
    .blog {padding-block: 40px;}
    .blog .wrapper {gap: 20px;}
    .blog .post {gap: 10px;}
}

@media only screen and (max-width: 475px) {
    /* Hero */
    .hero::before {width: 80px; height: 75px;}
    .hero .title > :first-child {font-size: var(--fs-xl, 42px);}
}

@media only screen and (max-width: 360px) {
    /* Blog */
    .blog .post {gap: 8px;}
    .blog .post > :nth-child(2) {font-size: var(--fs-md, 26px);}
}