.single-author {
    display: grid;
    width: 100%;
    background-image: linear-gradient(20deg, lighten($primary-color, 45%), white, lighten($primary-color, 45%));    
    border-bottom: 2px solid $primary-color;
    margin-top: 3rem;
    height: auto;
    grid-template-columns: max-content repeat(4, 1fr);
    grid-template-rows: repeat(2, min-content);    

    @media only screen and (max-device-width: 499px) {
    display: grid;
    width: 100%;
    background-image: linear-gradient(20deg, lighten($primary-color, 45%), white, lighten($primary-color, 45%));    
    border-bottom: 2px solid $primary-color;
    margin-top: 3rem;
    height: auto;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(3, min-content); 
    }

    .single-author__avatar {
        grid-column: 1 / 2;
        grid-row: 1 / -1;
        padding: 1rem;

        @media only screen and (max-device-width: 499px) {
            grid-column: 1 / 2;
            grid-row: 1 / 3;
        }
    }
        
    .single-author__title {
        grid-column: 2 / 5;
        grid-row: 1 / 2 ;
        font-size: 125%;
        margin-top: 1rem;
        padding-left: 1rem;
        font-weight: 900;

        
        @media only screen and (max-device-width: 499px) {
            grid-column: 2 / -1;
            grid-row: 1 / 2;
        }
    }

    .single-author__post {
        grid-column: 5 / -1;
        grid-row: 1 / 2 ;
        margin-top: 1rem;
        
        @media only screen and (max-device-width: 499px) {
            grid-column: 2 / -1;
            grid-row: 2 / 3;
        }
    }
    
    .single-author__desc {
        grid-column: 2 / -1;
        grid-row: 2 / -1 ;
        padding-right: 1rem;
        text-align: justify;

        @media only screen and (max-device-width: 499px) {
            grid-column: 1 / -1;
            grid-row: 3 / -1;
        }
    }
}

.author-area {
    background-image: linear-gradient(20deg, lighten($primary-color, 45%), white, lighten($primary-color, 45%));    
    border-bottom: 2px solid $primary-color;
    height: auto;
    padding: 1rem;
    justify-items: center;
    justify-content: center;
    align-items: center;


    &__post {
        margin-bottom: 1rem;
    }

    &__desc {
        text-align: justify;
    }
}