website/assets/scss/blog.scss

// general
@import "variables";
@import "main";

// fonts
@import "fonts/playfair";

// markup
@import "markup/render-image";

// partials
@import "partials/sidebar";
@import "partials/footer";
@import "partials/helpers/icons.scss";

#blog-header {
    background: var(--vriish-gradient);
    font-family: "playfair";
    font-size: 2rem;
    height: 40vh;
    color: var(--vriish-gradient-text);
    mask: var(--vriish-waves);
    padding: 1rem 1rem 3rem 1rem;
    display: flex;
    flex-direction: column;
    place-content: center;
    text-align: center;

    @media (max-width: 1140px) {
        height: 30vh;
        font-size: 1.5rem;
    }
    
    h1 {
        letter-spacing: 0.3rem;
        font-size: 4rem;
        margin: 0;
        @media (max-width: 1140px) {
            font-size: 2.5rem;
        }
    }

    p {
        letter-spacing: 0.15rem;
        margin: 0;
    }
}

#posts-wrapper {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(10rem, 18rem));
    gap: 1rem;
    justify-content: center;
    margin-top: 2rem;
    
    .post-wrapper {
        hyphens: auto;
        padding: 1rem;
        color: var(--vriish-gradient-text);
        background: var(--vriish-gradient);
        border-radius: .5em;
        display: flex;
        flex-direction: column;
        scroll-snap-align: start;
        text-decoration: none;
        min-height: 10rem;
        justify-content: space-between;

        p {
            margin: 0;
        }
    }
}