@media (max-width: 1440px) {
    .about-me p, .about-me h2 {
        padding: 0 .5rem;
    }
    .about-me{
        padding: 0.4rem;
    }
    article.post{
        padding: 0.4rem 0.6rem;
    }
}
@media (max-width: 1232px) {
    main{
        padding: 0 1vw;
    }
}
@media (max-width: 1024px) {
    main{
        grid-template-columns: 1fr 0.4fr;
    }
    .post-list{
        grid-area: 1/2;
    }
    main:has(.post-list) #bioSocket{
        display: none;
    }
    main:not(:has(.post-list)) #bioSocket{
        display: block;
        grid-area: 1/2;
    }
    #pagination{
        grid-area: 2/1;
    }
}
@media(max-width: 768px) {
    main{
        grid-template-columns: 1fr auto;
        padding: 0;
        gap:0;
    }
    .about-me{
        display: none;
    }
    .post-list{
        display: none;
    }
}  
@media(max-width: 480px) {
    body{
        font-size: 0.85rem;
    }
    a.logo {
        font-size: 1.25rem;
    }
    .post h2 {
        margin-block-start: 0.5rem;
        margin-block-end: 0.2rem;
        font-size: clamp(1.1rem, 4vw, 1.25rem);
    }
    main{
        grid-template-columns: 1fr;
    }
}