.posts {
    font-size: 14px;
    width: 90%;
    padding: 0.5rem;
    margin: 5rem auto;
    border-radius: 5px;
}

    .posts > div.posts-title {
        text-align: center;
        margin: 3rem 0;
    }

    .posts .posts-title h4 {
        color: #402E32;
        border-bottom: 4px solid #D4AF37;
        display: inline-block;
        padding-bottom: 0.5rem;
        font-size: 24px;
    }

    .posts > div.posts-items {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        gap: 20px;
    }

        .posts > div.posts-items > div.post {
            border: 1px solid #A9864E;
            padding: 8px;
            text-align: center;
            border-radius: 8px;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            height: 100%;
        }

            .posts > div.posts-items > div.post > div.post-picture > img {
                width: 100%;
                height: auto;
                object-fit: contain;
                margin-bottom: 10px;
                display: block;
                border-radius: 6px;
            }

            .posts > div.posts-items > div.post > a.post-title {
                padding: 0.5rem;
                text-decoration: none;
                color: #402E32;
            }

            .posts > div.posts-items > div.post > div.port-description {
                font-size: 12px;
                color: #808080;
                margin: 0.5rem 0 0 0;
                padding: 0.5rem;
                text-align: justify;
                text-align-last: center;
            }

@media only screen and (min-width: 768px) {
}

@media only screen and (max-width: 768px) {
    .posts {
        margin: 0rem auto;
    }

        .posts > div.posts-title {
            margin: 1rem 0;
        }

        .posts .posts-title h4 {
            font-size: 14px;
        }
}