/*
 * This stylesheet is meant for the blog and unix notes listing pages. This is
 * where a collection of posts are shown all at once.
 *
 * The parent <main> must have a class called ".post-listing"
 *
 */
main.post-listing {
    width: 960px;
    margin: auto;
}
main.post-listing ul {
    display: flex;
    flex-wrap: wrap;
    gap: 2rem;
    list-style-type: none;
    margin: 0;
    padding: 0;
}
main.post-listing ul li {
    width: calc(50% - 1rem);
}
main.post-listing img {
    height: 232px;
    width: 464px;
    object-fit: contain;
}
main.post-listing img:hover {
    filter: drop-shadow(0 0 6px rgba(0,0,0,0.3));
}
@media (max-width: 720px) {
    main.post-listing ul {
        gap: 0.5em;
    }
    main.post-listing ul li {
        width: 100%;
        text-align: center;
    }
    main.post-listing ul li:first-child {
        margin-bottom: 0;
    }
    main.post-listing ul li:first-child .title {
        font-size: 1.563em;
    }
}