main{grid-template-columns:1fr min(1260px,100%) 1fr;color:var(--main-tr70)}
article header{padding:30px 0}
article header h1{margin:.45em 0}
article header p{margin:0}
article :where(h2,h3){margin-top:1.25em}
aside>h3{margin-bottom:1em}
.posts{display:grid;gap:24px}
.post{background-color:var(--brown-tr10);border-radius:8px;overflow:hidden;display:flex;color:var(--main-tr70);align-items:center;max-height:220px}
.post:hover{background-color:#9734294d}
.post,.post :not(figure){transition:all .2s ease-in-out}
.post .content>*{margin:0}
.post .uppercase-spaced{color:var(--apricot);font-size:inherit}
.post a svg{display:inline-block;margin-left:3px;vertical-align:middle}
.post img{width:100%;height:100%;object-fit:cover}
.post .flex{justify-content:space-between;padding-top:10px;font-size:.75em}
.post .content{display:flex;flex-direction:column;gap:12px;padding:12px;flex:1 1 auto}
.post figure{flex:0 0 23.2%;height:100%}
.post h3{font-size:1rem}
@media only screen and (max-width: 767px) {
article header>p{font-size:.75em}
.post{max-height:160px}
.post .content p:first-child{font-size:.625em}
}
@media only screen and (min-width: 768px) {
.post .content p:first-child{font-size:.875em}
}
@media only screen and (max-width: 1023px) {
article img.d{display:none}
main{padding-top:0}
article img.m{margin-left:-20px;margin-right:-20px;width:100vw;max-width:fit-content}
aside{margin-top:2em}
}
@media only screen and (min-width: 1024px) {
article img.m{display:none}
main>.flex-l{gap:30px}
aside{flex:0 0 345px}
aside>h3{font-size:1.5em}
.post{max-height:320px}
.post .content{padding:12px}
.post figure{flex:0 0 80px}
}
@media only screen and (min-width: 1400px) {
main>.flex-l{gap:90px}
}