/*
====================================================
RELATED POSTS
====================================================
*/

.singlepost-related-section{
    padding:
        0 20px 100px;

    background:var(--bg-hero);
}

.singlepost-related-container{
    max-width:900px;

    margin:0 auto;

    background:var(--surface);

    border:1px solid var(--line-300);

    border-radius:28px;

    padding:38px;
}

.singlepost-related-heading{
    font-size:28px;

    font-weight:800;

    margin-bottom:34px;

    color:var(--color-ink);
}

.singlepost-related-grid{
    display:grid;

    grid-template-columns:
        repeat(2, 1fr);

    gap:18px;
}

.singlepost-related-card{
    display:flex;

    align-items:center;

    gap:16px;

    padding:14px;

    border-radius:18px;

    text-decoration:none;

    transition:.25s ease;

    border:1px solid transparent;
}

.singlepost-related-card:hover{
    background:var(--color-bg);

    border-color:var(--line-300);
}

.singlepost-related-thumb{
    flex-shrink:0;
}

.singlepost-related-thumb img{
    width:90px;
    height:90px;

    object-fit:cover;

    border-radius:14px;

    display:block;
}

.singlepost-related-content h3{
    font-size:17px;

    line-height:1.5;

    font-weight:700;

    color:var(--color-ink);

    margin:0;
}

/*
====================================================
RESPONSIVE
====================================================
*/

@media(max-width:768px){

    .singlepost-related-section{
        padding:
            0 16px 80px;
    }

    .singlepost-related-container{
        padding:24px;

        border-radius:24px;
    }

    .singlepost-related-grid{
        grid-template-columns:1fr;
    }

    .singlepost-related-thumb img{
        width:76px;
        height:76px;
    }

    .singlepost-related-content h3{
        font-size:16px;
    }

}