.post {
padding: 170px 0 120px;
}
.post__hdr {
position: relative;
aspect-ratio: 1/0.4531;
display: flex;
}
.post__hdr-text {
margin: auto 160px 110px;
max-width: 820px;
color: var(--color-white);
}
.post__time {
font: 20px/1.5 var(--font-secondary);
}
.post__title {
font-size: 55px;
font-weight: 500;
margin-top: 30px;
}
.post__hdr::before,
.post__img {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
border-radius: 30px;
}
.post__hdr::before {
content: "";
z-index: -1;
background-color: rgba(0, 0, 0, 0.4);
}
.post__img {
object-fit: cover;
z-index: -2;
}
.post__content {
max-width: 1010px;
width: 100%;
margin: 50px auto 0;
display: flex;
flex-direction: column;
gap: 20px;
font-size: 20px;
line-height: 1.5;
}
.post__content h2,
.post__content h3,
.post__content h4,
.post__content h5 {
font-size: 28px;
line-height: 1.2;
color: var(--color-green-dark);
margin-top: 20px;
}
.post__content .wp-block-image {
width: max-content;
margin: 20px 0;
border-radius: 20px;
overflow: hidden;
}
.post__content .wp-block-image.aligncenter {
margin-right: auto;
margin-left: auto;
}
.post__content .wp-block-image.alignright {
margin-left: auto;
}
.post__content ul,
.post__content ol {
display: flex;
flex-direction: column;
gap: 15px;
}
.post__content ul li,
.post__content ol li {
position: relative;
padding-left: 40px;
}
.post__content ul li::before,
.post__content ol li::before {
content: "";
position: absolute;
top: 2px;
left: 0;
width: 24px;
height: 24px;
background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgaWQ9Imljb24tcGFyazpzbGVhdmVzIj4KPGcgaWQ9Ikdyb3VwIj4KPHBhdGggaWQ9IlZlY3RvciIgZD0iTTguNSAyMS41QzguNSAyMS41IDE1IDIyIDE4LjUgMThDMjIgMTQgMjIgMiAyMiAyQzIyIDIgMTAgMS41IDYgNC41QzIgNy40OTk5OSAzIDE2IDMgMTYiIHN0cm9rZT0iIzYwNzczQyIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPHBhdGggaWQ9IlZlY3Rvcl8yIiBkPSJNMiAyMkMyIDIyIDcuNTg5NjUgMTcuNzc1NyAxMSAxNEMxNC40MTA0IDEwLjIyNDIgMTYgNi41IDE2IDYuNSIgc3Ryb2tlPSIjNjA3NzNDIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPgo8cGF0aCBpZD0iVmVjdG9yXzMiIGQ9Ik0xMSAxNEwxMC41IDcuNSIgc3Ryb2tlPSIjNjA3NzNDIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPgo8cGF0aCBpZD0iVmVjdG9yXzQiIGQ9Ik0xMSAxNEwxNiAxMy41IiBzdHJva2U9IiM2MDc3M0MiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+CjwvZz4KPC9nPgo8L3N2Zz4K");
background-repeat: no-repeat;
background-position: center;
background-size: contain;
display: flex;
flex-shrink: 0;
}
@media screen and (max-width: 1440px) {
.post {
padding: 140px 0 100px;
}
.post__hdr-text {
margin: auto 100px 80px;
}
.post__title {
font-size: 40px;
}
.post__content h2,
.post__content h3,
.post__content h4,
.post__content h5 {
font-size: 22px;
margin: 10px 0 0;
}
}
@media screen and (max-width: 1280px) {
.post {
padding: 130px 0 80px;
}
.post__hdr-text {
margin: auto 60px 60px;
max-width: 550px;
}
.post__time {
font-size: 16px;
}
.post__title {
font-size: 30px;
margin-top: 15px;
}
.post__hdr::before,
.post__img {
border-radius: 20px;
}
.post__content {
margin-top: 40px;
max-width: 680px;
font-size: 18px;
gap: 15px;
}
.post__content ul li,
.post__content ol li {
gap: 10px;
}
.post__content ul li::before,
.post__content ol li::before {
width: 20px;
height: 20px;
}
}
@media screen and (max-width: 768px) {
.post {
padding: 80px 0 50px;
}
.post__hdr {
width: 100vw;
margin-left: -20px;
}
.post__hdr-text {
margin: auto 20px 20px;
max-width: 360px;
}
.post__time {
font-size: 12px;
}
.post__title {
font-size: 18px;
margin-top: 8px;
}
.post__hdr::before,
.post__img {
border-radius: 0;
}
.post__content {
margin-top: 20px;
max-width: 680px;
font-size: 14px;
}
.post__content h2,
.post__content h3,
.post__content h4,
.post__content h5 {
font-size: 18px;
}
.post__content .wp-block-image {
width: 100vw;
margin: 5px 0 5px -20px;
border-radius: 0;
}
.post__content ul,
.post__content ol {
gap: 10px;
}
.post__content ul li,
.post__content ol li {
padding-left: 22px;
}
.post__content ul li::before,
.post__content ol li::before {
width: 16px;
height: 16px;
}
}