:root{
    --light-color: #fff;
    --light-color-alt: #afb6cd;
    --primary-background-color: #131417;
    --secondary-background-color: #252830;
    --hover-light-color: var(--light-color);
    --hover-dark-color: var(--primary-background-color);
    --gradient-color: linear-gradient(
        115deg,#4fcf70,#fad648,#a767e5,#12bcfe,#44ce7b);
    --transparent-light-color: rgba(255,255,255,.05);
    --transparent-dark-color: rgba(0,0,0,.75);
    --font-family: 'Poppins', sans-serif;
    --font-size-xsm: 1.2rem;
    --font-size-sm: 1.6rem;
    --font-size-md: 2.4rem;
    --font-size-lg: 3rem;
    --font-size-xl: 4rem;
    --gap: 2rem;
    --margin-sm: 2rem;
    --margin-md: 3rem;
    --item-min-height-sm: 20rem;
    --item-min-height-md: 30rem;
}

.blog-post{
    padding-bottom: 5rem;
}

.blog-post-data{
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding-block: 2.5rem;
}

.blog-post-title{
    font-size: clamp(3rem, 5vw, 6rem); 
}

.blog-post-data .article-data{
    margin-bottom: 2.5rem;
}

.blog-post-data img{
    width: 100%;
    height: 18rem;
    object-fit: cover;
    object-position: center 10%;
}

.blog-post-container .container{
    max-width: 90rem;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--gap);
}

.quote{
    background-color: #252830;
    padding: 2.5rem;
}

.quote p{
    font-style: italic;
}

.quote span{
    font-size: 5rem;
}

.author{
    margin-top: 5rem;
    gap: var(--gap);
}

.author{
    background-color: var(--secondary-background-color);
}

.author-image-box{
    position: relative;
    height: var(--item-min-height-sm);
}

.author-about{
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    margin-bottom: 50px;
    margin-top: -40px;
    margin-left: -22px;
    /* top: 40px; */
    /* gap: 1rem; */
}

.author-name{
    color: var(--light-color);
    font-weight: 400;
}

.author-about p{
    max-width: 50rem;
    margin-bottom: 1rem;
}

.author-about .social-media{
    margin-top: auto;
    margin-bottom: 0;
}

@media screen and (min-width: 700px) {

    .trending-news-box{
        flex-direction: row;
        align-items: center;
    }

    .trending-news-img-box{
        width: 50%;
    }

    .trending-news-data{
        margin: auto;
        text-align: center;
    }
    
    .newsletter-description{
        max-width: 40rem;
    }

    .form-container-inner{
        align-items: center;
    }

    .popular-tags-container,
    .footer-container{
        grid-template-columns: repeat(2, 1fr);
    }

    .company-data{
        order: 0;
    }

    .author{
        grid-template-columns: 25rem 1fr;
    }
}