.blog_hero-section { padding-top: 80px; }
.post-section { padding-top: 80px; padding-bottom: 80px; }
.blog__posts {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 70px 50px;
}
.blog__post {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.blog__post__link {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 3;
}
.blog__post__link--author { z-index: 5; }
.blog__post__image {
    position: relative; 
    width: 100%;
    height: 0;
    padding-top: 56.25%;
    overflow: hidden;
}
.blog__post__image img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: var(--border-radius-regular);
}
.blog__post__info {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
    height: 100%;
}
.blog__post__date {
    text-transform: uppercase;
    font-size: 0.8rem;
}
.blog__post__title { color: var(--primary-color); font-size: 1.1rem; font-weight: 700; line-height: 1; transition: 0.3s }
.blog__post__link:hover ~ .blog__post__info .blog__post__title { color: var(--secondary-color); transition: 0.3s }
.blog__post__description { font-size: 0.85rem; line-height:1.3 }
.blog__post__footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: auto;
    gap: 5px;
    z-index: 5;
}
.blog__post__author {
    display: flex;
    align-items: center;
    gap: 5px;
    position: relative;
}
.blog__post__author__link {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 5;
}
.blog__post__author__image {
    position: relative;
    width: 40px;
    height: 40px;
}
.blog__post__author__image img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: var(--border-radius-regular);
}
.blog__post__author__name {
    font-size: 0.8rem;
}
.blog__post__share {
    position: relative;
    z-index: 5;
    padding: 0 5px;
}
.blog__post__share__trigger { cursor: pointer; transition: all 0.3s ease-in-out; font-size: 1.2rem; }
.blog__post__share__trigger * { color: var(--primary-color); transition: 0.3s; }
.blog__post__share__trigger:hover * { color: var(--secondary-color); transition: 0.3s; }
.blog__post__share__menu {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 10px;
    padding: 5px 10px;;
    position: absolute;
    top: -10px;
    right: 0;
    background: var(--white-color);
    box-shadow: 0px 0px 20px -7px var(--black-color);
    border-radius: var(--border-radius-steep);
    transition: 0.3s;
    opacity: 0; visibility: hidden;
}
.blog__post__share:hover > .blog__post__share__menu  {
    opacity: 1; visibility: visible; transition: 0.3s;
}
.blog__post__share_item { cursor: pointer; font-size: 1.1rem }
.blog__post__share_item:hover, .blog__post__share_item:hover * { color: var(--primary-color); }

.blog__post--horizontal {
    display: grid;
    grid-template-columns: 1fr 1fr;
    justify-content: center;
    justify-items: center;
    align-items: center;
    gap: 30px;
}
.blog__post--horizontal .blog__post__info { height: fit-content; }
.blog__post--horizontal .blog__post__footer { padding-top: 10px; }




.post__info__header { display: flex; justify-content: space-between; gap: 20px; }
.post__info__image, .post__info__footer, .post__content { max-width:1000px }
.post__info__header__title { font-size: 1.5rem; font-weight: 300; margin-bottom: 0; text-align:left }
.post__info__header__date { min-width: fit-content; line-height: 1.5; }
.post__info__image { padding-top: 37.25%; }
.post__info__header, .post__info__image, .post__info__footer { margin-bottom: 20px; }
.post__info__footer__author__image { width: 60px; height: 60px }
.post__content div, .post__content p, .post__content em, .post__content strong, .post__content ul, .post__content ol, .post__content li { font-family: var(--long-text-font); font-size: 0.8rem; line-height: 1.7;}
.post__content em, .post__content strong { font-size: 0.75rem;}
.post__content h2, .post__content h3, .post__content h4, .post__content h5, .post__content h6 { text-align: left; margin-bottom: 10px; font-family: var(--text-font); line-height:1.2 }
.post__content h1, .post__content h1 strong { font-size: 2.2rem; font-family: var(--text-font); line-height:1.2}
.post__content h2, .post__content h2 strong { font-size: 1.8rem; font-family: var(--text-font); line-height:1.2}
.post__content img, .trix-content img { margin-top: 20px; margin-bottom: 20px; object-fit: cover; max-width: 100%; }
.post__content a, .trix-content a, .post__content a *, .trix-content a * { color: var(--primary-color); font-family: var(--long-text-font) }
.post__content ul, .post__content ol { margin-left: 20px }
.trix-content h2, .trix-content h3, .trix-content h4, .trix-content h5, .trix-content h6 { text-align: left}




/*.blog__posts { grid-template-columns: repeat(auto-fit, minmax(380px, 1fr)); }*/

@media all and (max-width: 1365px) { .blog__posts { gap: 70px 40px } }
@media all and (max-width: 989px) { 
    .blog_hero-section, .post-section { padding-top: 50px; padding-bottom: 50px }
    .blog__posts { grid-template-columns: repeat(2, 1fr); padding-bottom: 50px } 
    .blog__post__share__trigger { font-size: 1.3rem; }
    .blog__post__share_item { font-size: 1.2rem }

    .post__info__header { flex-direction: column; gap: 10px; margin-bottom: 20px; }

    .post__content div, .post__content p, .post__content em, .post__content strong, .post__content ul, .post__content ol, .post__content li {font-size: 0.9rem;}
    .post__content em, .post__content strong { font-size: 0.95rem;}
    .post__content h1, .post__content h1 strong { font-size: 2.4rem;}
    .post__content h2, .post__content h2 strong { font-size: 2rem;}



}
@media all and (max-width: 899px) { .blog__posts { gap: 70px 30px } }
@media all and (max-width: 767px) { 
    .blog__posts { gap: 70px 20px }
    .blog__post__title { font-size: 1.2rem }
    .blog__post__description { font-size: 0.9rem } 
    .blog__post__author__name { font-size: 0.9rem }
    .blog__post__share__trigger { font-size: 1.4rem; }
    .blog__post__share_item { font-size: 1.3rem }

    .blog__post--horizontal { grid-template-columns: 1fr; gap: 10px; }
    .blog__post--horizontal .blog__post__footer { padding-top: 0; }

    .post__content div, .post__content p, .post__content em, .post__content strong, .post__content ul, .post__content ol, .post__content li {font-size: 1rem;}
    .post__content em, .post__content strong { font-size: 1.05rem;}
    .post__content h1, .post__content h1 strong { font-size: 2.6rem;}
    .post__content h2, .post__content h2 strong { font-size: 2.2rem;}
}
@media all and (max-width: 574px) { 
    .blog__posts { grid-template-columns: repeat(1, 1fr); gap: 30px }
    .blog__post__title { font-size: 1.3rem }
    .blog__post__description { font-size: 0.95rem } 
}