/* ___ POST ___ */
.post {padding-block: 26px 120px;}
.post .wrapper { display: grid; grid-template-columns: minmax(550px, 670px) minmax(375px, 502px); gap: 26px;}
.post .content > :first-child {font-size: var(--fs-md); font-weight: 600; font-family: var(--ff-primary); color: var(--c-primary); line-height: 1.3; margin-bottom: 8px;}
.post .content > img {width: 100%; height: 373px; object-fit: cover;}
.post .content > ul {display: flex; gap: 16px; margin-bottom: 12px;}
.post .content > ul li img {margin-right: 12px;}
.post .content > ul li {font-size: calc(var(--fs-xs) - 2px ); color: var( --c-neutral-wht);}
.post .post-content {margin-block: 24px;}
.post .post-content p {color: #000; font-size: var(--fs-sm); line-height: 1.6; margin-bottom: 24px;}
.post .post-content :where(h1,h2,h3,h4,h5,h6) {margin-bottom: 12px;}
.post .post-content :where(h1, h2) {font-size: var(--fs-xl); line-height: 1.3;}
.post .post-content :where(h3, h4) {font-size: var(--fs-lg); line-height: 1.2;}
.post .post-content :where(h5, h6) {font-size: var(--fs-md);}
.post .post-content :where(ul, ol) {margin-bottom: 8px;} 
.post .post-content li {color: #000; font-weight: 600; list-style: disc; list-style-position: inside; margin-bottom: 4px;}
.post .post-content ol li {list-style: decimal; list-style-position: inside;} 
.post .post-content p a {font-size: var(--fs-sm, 18px); color: var(--c-primary); display: inline; font-weight: 600;}
.post .content ul:not(:first-of-type) {justify-content: space-between;}
.post .content ul li a {display: flex; align-items: center; gap: 8px; font-size: calc(var(--fs-sm) + 2px ); color: var(--c-neutral-wht);}
.post .recent {margin-top: 24px;}
.post .recent > :first-child {font-size: var(--fs-md); color: var(--c-primary); font-family: var(--ff-primary); font-weight: 600;}
.post .recent a {display: flex; gap: 24px; margin-top: 24px; justify-content: flex-start;}
.post .recent  div > :first-child {font-size: 16px; color: var(--c-primary); font-weight: 600;  font-family: var(--ff-primary);   -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis;}
.post .recent a ul {display: flex;  gap: 16px; margin-top: 10px;}
.post .recent  ul li img {margin:-3px 6px;}
.post .recent  ul li {font-size: calc(var(--fs-xs) - 2px ); color: var( --c-neutral-wht); font-weight: 600;}
.post .recent p {margin-top: 10px; color: #000; font-size: var(--fs-xs); line-height: 22px;  
display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis;}
.post .category {margin-top: 32px;}
.post .category > :first-child {color: var(--c-primary); font-size: var(--fs-md); font-weight: 600; line-height: 1; font-family: var(--ff-primary); display: block;  margin-bottom: 24px;}
.post .category > a {display: flex; gap: 16px;} 
.post .category a ul {display: flex; gap: 16px; margin-top: 18px;}
.post .category a li img {margin-right: 12px;}
.post .category a li  {font-size: var(--fs-xs); color: var( --c-neutral-wht);}
.post .category p {color: #000; font-size: var(--fs-base);  line-height: 1.6; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; }
.post .category > a:not(:first-of-type) {margin-top: 12px;}
.post  .video {margin-top: 32px;}
.post  .video > :first-child {color: var(--c-primary); font-size: var(--fs-md); font-weight: 600; line-height: 1; font-family: var(--ff-primary); display: block; margin-bottom: 24px;}
.post  .subscribe {margin-top: 32px;}
.post  .subscribe > :first-child {color: var(--c-primary); font-size: var(--fs-md); font-weight: 600; font-family: var(--ff-primary); display: block; margin-bottom: 24px;}
.post  .subscribe form input {width: 100%; padding: 13px 20px; border: 1px solid var(--c-neutral-gry); border-radius: 4px; margin-bottom: 16px; max-width: 504px;}
.post  .subscribe form button {width: 100%; border-radius: 4px; max-width: 504px;}
.post  .tag {margin-top: 32px;}
.post  .tag > :first-child {color: var(--c-primary); font-size: var(--fs-md); line-height: 1; font-weight: 600; font-family: var(--ff-primary); display: block; margin-bottom: 24px;}
.post  .tag a {border: 1px solid var(--c-neutral-gry); border-radius: 4px; padding: 4px 5px;}
.post .tag div {display: flex; gap: 6px; flex-wrap: wrap;}
.post  .tag div a {min-width: 95px; display: flex; align-items: center; justify-content: space-between; font-size: calc(var(--fs-xs) - 2px); color: #000; }
.post  .tag a span {background-color: var(--c-primary); color: #fff; padding: 2px; font-weight: 600;}

/* ___ MEDIA QUERY ___ */
@media only screen and (max-width: 1200px){
    .post .wrapper {gap: 20px;}
    .post .video iframe {max-width: 500px; width: 100%;}
    .post .category p {-webkit-line-clamp: 2;}
}

@media only screen and (max-width: 991px) {
    .post {padding-bottom: 80px;}
    .post .wrapper {grid-template-columns: 1fr;}
    .post .content > img {height: auto;}
    .post .post-content > p {margin-bottom: 18px;}
}

@media only screen and (max-width: 767px) {
    .post .recent a ul {margin-top: 16px;}
}

@media only screen and (max-width: 575px) {
    .post {padding-bottom: 40px;}
    .post .recent {margin-top: 16px;}
    .post .video > :first-child {margin-bottom: 16px;}
    .post .subscribe {margin-top: 20px;}
    .post .subscribe > :first-child {margin-bottom: 16px;}
    .post .tag > :first-child {margin-bottom: 16px;}
    .post .post-content p {margin-bottom: 12px;}
    .post .recent a {margin-top: 12px;}
}

@media only screen and (max-width: 475px) {
    .post .recent a  {flex-direction: column; gap: 12px;}
    .post .recent a > img {width: 100%;}
    .post .recent a ul {margin-top: 10px;}
    .post .post-content > p {margin-top: 12px;}
    .post .content > ul {margin-block: 5px 7px;}
}

@media only screen and (max-width: 360px) {
    .post .category a ul {flex-direction: column;}
}