#posts {
    background-color: var(--blackglass);
    padding: 4dvw 0 4dvw 0;
    margin: 4dvw 0 0 0;
    width: 100%;
    display: flex;
    justify-content: center;

    ul {
        width: calc(100% - 5dvw);
        display: flex;
        flex-wrap: wrap;
        gap: 1.5vw;
        a {
            width: calc(33.33% - 1dvw - 2px);
            height: 30dvh;
            overflow: hidden;
            border-radius: 1dvw;
            li {
                overflow: hidden;
                width: 100%;
                background: rgb(15, 15, 15);
                display: flex;
                img {
                    width: 25dvh;
                    height: 30dvh;
                    object-fit: cover;
                }
                hgroup {
                    width: calc(100% - 25dvh);
                    label {
                        display: block;
                        width: 100%;
                        text-align: center;
                        font-size: 1.5em;
                        font-family: "Special Gothic Expanded One", sans-serif;
                        color: var(--btn);
                    }
                    h3 {
                        font-family: Arial;
                        display: block;
                        width: 100%;
                        text-align: right;
                    }
                    p {
                        font-family: Arial;
                        white-space: pre-wrap;
                    }
                }
            }
            box-shadow: 0 0 0 #000000;
        }
        a:hover {
            box-shadow: 0 0 5vw var(--against-color);
            z-index: 100;
        }
    }
}