@media only screen and (min-device-width: 600px) {
    .home-3-container {
        width: 90vw;
        margin: 1rem auto;
        @media only screen and (max-device-width: 1023px) {
            width: 100vw;
        }
        
        .home-3-row {
            display: flex;
            @media only screen and (max-device-width: 1023px) {
                display: flex;
                flex-direction: column;
            }
        
            .column1-3 {
                flex: 0 0 72%;
                display: grid;
                grid-template-columns: repeat(2, 1fr);
                grid-template-rows: repeat(6, min-content);
                grid-auto-rows: hidden;
                grid-gap: .5rem;

                & > * {
                    background-color: white;
                    margin-right: 1rem;
                    @media only screen and (max-device-width: 1023px) {
                        margin-right: 0;
                    }
                    
                }

                .home-3-sticky {
                    grid-column: 1 / -1;
                    grid-row: 1 / 2;
                    margin-bottom: .5rem;
                }

                .home-3-pagination {
                    grid-column: 1 / -1;
                    grid-row: 8 / 9;
                    align-content: center;
                }
                
            }
        
            .column1-100-3 {
                flex: 0 0 100%;
                display: grid;
                grid-template-columns: repeat(3, 1fr);
                grid-template-rows: repeat(6, min-content) min-content;

                @media only screen and (min-device-width: 600px) and (max-device-width: 1023px) {
                    grid-template-columns: repeat(2, 1fr);
                    grid-template-rows: repeat(6, min-content);
                    grid-auto-rows: hidden;
                    grid-gap: .5rem;
                }
        

                & > * {
                    background-color: white;
                    margin-right: 1rem;
                    @media only screen and (min-device-width: 600px) and (max-device-width: 1023px) {
                        margin-right: 0;
                    }

                }

                .home-3-sticky {
                    grid-column: 1 / -1;
                    grid-row: 1 / 2;
                    margin-bottom: .5rem;
                }

                .home-3-pagination {
                    grid-column: 1 / -1;
                    grid-row: 12 / 13;
                    align-content: center;
                }
            }    
            .sidebar-column {
                flex: 1;
                background-color: lighten($primary-color, 40%);
                padding: 1rem;
                margin-right: 0 !important;
            }
        }
        
    }
}

@media only screen and (max-device-width: 599px) {
    .home-3-container {
        display: none;
    }
}

.margin-bottom-5 {
    margin-bottom: 5px;
}
    


.home-3-contnet {
    padding: 5px;
    box-shadow: 0 0 6px rgba(black, 0.6);
    margin-bottom: 1rem;
    display: flex;
    flex-direction: column;

    @media only screen and (min-device-width: 600px ) and (max-device-width: 1023px) {
        box-shadow: none;
        margin-bottom: 0;
    }

    & > * {
        padding: .5rem;
        @media only screen and (max-device-width: 999px) {
            padding: 0;
            
        }
    }

    &__thumbnail {
      
        img {
            width: 100%;
            height: auto;
        }
    }

    &__title {
        text-align: center;
    }

    &__meta {
        display: flex;
        text-align: center;
        justify-content: center;

        & > * {
            margin-right: 1rem;
        }
    }

    &__excerpt {
        text-align: justify;
    }

    &__content {
        a {
            color: $font-color;
        }
    }

    &__link {
        a {
            background-color: $primary-color-dark;
            display: block;
            color: white;
            text-align: center;
            padding: 1rem 2rem;
            transition: all 0.3s ease-in-out;
            text-decoration: underline;
            &:hover {
                background-color: $primary-color;
                color: white;
                transition: all 0.3s ease-in-out;
            }
        }
    }

    &__image {
       img {
            display: block !important;
       }
    }

    &__rm {
        margin-top: 5px;
        a {
            background-color: $primary-color-dark;
            padding: 0.2rem .6rem;
            color: white;
            display: block;
            text-align: center;
            &:hover {
                transition: .3s all ease-in-out;
                background-color: $primary-color;
            }

            @media only screen and (min-device-width: 600px ) and (max-device-width: 1023px) {
                    a {
                        display: block;
                        text-align: center;
                        bottom: 0;
                    }
            }
        }
    }
}