
$color-primary-0: #B2E1EA;	// Main Primary color */
$color-primary-1: #E2F7FB;
$color-primary-2: #CBEDF4;
$color-primary-3: #98D3DE;
$color-primary-4: #7FC2CE;

img
    max-width: 95vw
.blog-post
    padding: 0 1rem
    margin: auto
    max-width: 800px

.blog-posts
    margin: auto
    display: grid
    grid-template-columns: repeat(auto-fill, 300px)
    grid-auto-rows: 300px
    grid-gap: .4rem
    justify-content: center
    text-align: center
    a 
        text-decoration: none
    .blog-post-card
        // height: 300px
        // width: 300px
        
        overflow: 
        position: relative
        background: darken($white, 1%)
        // &:nth-of-type(4n-1)
        //     border-radius: 2rem
        // &:nth-of-type(3n-2)
        //     &:before
        //         background: $white
        //         position: absolute
        //         height: 150px
        //         width: 150px
        //         bottom: -75px
        //         left: -75px
        //         content: ''
        //         transform: rotate(45deg)
        //         border-radius: 50%
        //         border-radius: 50%
                
        &:nth-of-type(5n-4)
            background: $color-primary-0
            &:hover
                background: darken($color-primary-0, 3%)
        &:nth-of-type(5n-3)
            background: $color-primary-1
            &:hover
                background: darken($color-primary-1, 3%)
        &:nth-of-type(5n-2)
            background: $color-primary-2
            &:hover
                background: darken($color-primary-2, 3%)
        &:nth-of-type(5n-1)
            background: $color-primary-3
            &:hover
                background: darken($color-primary-3, 3%)
        &:nth-of-type(5n-0)
            background: $color-primary-4
            &:hover
                background: darken($color-primary-4, 3%)
            h2
                // color: $white

        h2
            padding-top: 3rem
            font-size: 2rem
            font-family: 'Fredericka the Great'
            margin-bottom: 0
        
        em
            font-size: 1.2rem
            font-family: 'Zeyada'
        // .bottom
        //     position: absolute
        //     bottom: 0


    @media screen and (max-width: 800px)
        grid-template-columns: repeat(auto-fill, 150px)
        grid-auto-rows: minmax(150px, 100%)
        .blog-post-card
            h2
                padding-top: 0rem
                font-size: 1.4rem
