/* ___ Post ___ */
.post  {padding-block: 30px 70px;}
.post .wrapper {display: grid; grid-template-columns:minmax(615px, 920px) minmax(250px, 435px); gap: 36px;}
.post .content > img {width: 100%; height: 528px; object-fit: cover;} 
.post .detail {margin-bottom: 12px;}
.post .detail > ul {display: flex; gap: 15px; align-items: center; margin-block: 20px 12px;} 
.post .detail > ul li:first-of-type * {font-family: var(--c-primary); font-size: var(--fs-sm); font-weight: 700; color: var(--c-primary);}
.post .detail > ul li:nth-of-type(2) {display: flex; align-items: center; gap: 5px; font-size: var(--fs-xs, 14px);}
.post .detail > :nth-child(2) {font-size: calc(var(--fs-lg, 32px) + 4px); font-weight: 800; line-height: 1.2; margin-bottom: 15px;}
.post .detail > div {display: flex; align-items: center; justify-content: space-between; padding-block: 12px; border-top: 2px solid #A2A5AE; border-bottom: 2px solid #A2A5AE;}
.post .detail > div ul {display: flex; align-items: center;}
.post .detail > div ul:nth-of-type(1) {gap: 32px;}
.post .detail > div > ul:nth-of-type(1) > li:first-of-type {position: relative; display: flex; align-items: center; gap: 8px;} 
.post .detail > div > ul:nth-of-type(1) > li:first-of-type::after { position: absolute; width: 3px; height: 21px; top: 5px; right: -18px; background-color: #D9D9D9; content: '';}
.post .detail > div > ul li {font-family: var(--ff-primary); font-weight: 700;}
.post .social-icons li a {margin-inline: 6px; width: 38px; height: 38px; display: flex; align-items: center; justify-content: center;  background-color: #000; }
.post .social-icons li a:hover {background-color: var(--c-primary); transition: var(--transition);}
.post .content p {font-size: calc(var(--fs-base, 16px) + 2px); margin-bottom: 12px; color: #000; line-height: 1.4;}
.post .content > h2 {font-size: var(--fs-lg, 32px);}
.post .content > h3 {font-size: var(--fs-md, 26px);}
.post .content > :where(h2, h3) {margin-bottom: 12px; line-height: 1.3;}
.post .content > :where(h4, h5) {font-size: var(--fs-sm, 20px); margin-bottom: 12px;}
.post .content :where(ul, ol):not(.detail ul) {margin-bottom: 8px;}
.post .content li:not(.detail li) {color: #000; font-size: calc(var(--fs-base, 16px) + 2px); list-style: disc inside;}
.post .content .detail:not(ol li) {list-style: decimal; list-style-position: inside;}
.post .content > p a {color: var(--c-primary); display: inline-block;}
.post .content > p strong {font-weight: 800; font-family: var(--c-secondary);} 
.post .latest {padding: 28px 36px; background-color: var(--_c-bg-gray); margin-bottom: 40px}
.post .latest > :first-child {font-family: var(--ff-primary); font-size: var(--fs-md); font-weight: 800;} 
.post .latest ul li > :first-child  {font-family: var(--ff-primary); color: var(--c-primary); font-weight: 800; display: block; margin-bottom: 8px;}
.post .latest ul li > :nth-child(2) {line-height: 1.3; margin-right: 40px; font-family: var(--ff-primary); font-weight: 700; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis;} 
.post .latest ul li > :nth-child(2):hover {text-decoration: underline;}
.post .latest ul li {position: relative;  counter-increment: list-counter;}
.post .latest ul li:not(:last-of-type) {border-bottom: 1px solid #A2A5AE; padding-block: 8px;}
.post .latest ul li::after {position: absolute; content: counter(list-counter); right: 0; top: 22px; font-size: calc(var(--fs-lg) + 4px); color: var(--c-primary); font-family: var(--ff-primary); font-weight: 800;}

@media only screen and (max-width: 1200px) {
    .post .wrapper {grid-template-columns: minmax(500px, 920px) minmax(250px, 435px); gap: 24px;}
    .post .content > img {height: 460px;}
    .post .latest {padding: 24px;}
    .post .latest ul li > :nth-child(2) {margin-right: 40px;} 
}

@media only screen and (max-width: 991px) {
    .post {padding-block: 48px;}
    .post .wrapper {grid-template-columns: 1fr; gap: 10px;}
    .post .latest {padding: 12px 18px; margin-bottom: 30px;}
    .post .latest ul li::after {top: 10px;}
}

@media only screen and (max-width: 767px) {
    .post .content > img {height: 400px;}
    .post .detail > div:nth-of-type(1) {flex-direction: column; align-items: flex-start; row-gap: 15px; padding-block: 8px;}
}

@media only screen and (max-width: 575px) {
    .post {padding-block: 30px;}
    .post .content > img {height: 280px;}
    .post .detail > ul {margin-block: 8px 10px;}
    .post .detail > :nth-child(2) {margin-bottom: 10px;}
    .post .latest {padding: 10px; margin-bottom: 20px;}
    .post .latest ul li::after {top: 22px;}
    .post .latest ul li > :nth-child(2) {margin-right: 22px;}
}

@media only screen and (max-width: 475px) {
    .post .content > img {height: auto;}
    .post .post-content p {line-height: 1.2;}
}

@media only screen and (max-width: 360px) {
    .post .detail > div ul:nth-of-type(1) {flex-direction: column; align-items: flex-start; gap: 8px;}
    .post .detail > div > ul:nth-of-type(1) > li:first-of-type::after {content: none;}
    .post .social-icons li a {width: 30px; height: 30px;}
    .post .social-icons li a img {max-width: 15px;}
}