/**
 * Blog:description
 * ---------------------------------------------
 */
.blog.description {
    background: var(--color-primary);
    padding-block-start: 65px;
    padding-block-end: 90px;
}

.blog.description .description__text {
    font-size: var(--fs-25);
    font-weight: 600;
    font-family: var(--quicksand);
    color: var(--color-secondary-light);
    position: relative;
    padding-inline-start: 19px;
    max-width: 650px;
    margin: auto;
}

.blog.description .description__decoration {
    color: var(--color-secondary-light);
    position: absolute;
    top: 0px;
    left: -8px;
    display: none;
}

@media (min-width:414px) {
    .blog.description .description__decoration {
        display: block;
    }
}

@media (min-width:768px) {
    .blog.description {
        padding-block-start: 89px;
        padding-block-end: 120px;
    }

    .blog.description .description__decoration {
        left: -27px;
        top: -12px;
    }

}


/**
 * Blog:tabs
 * ---------------------------------------------
 */

.blog.tabs {
    padding-block-start: 33px;
    padding-block-end: 133px;
}

.blog.tabs .nav-tabs {
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: center;
    gap: 16px;
    border-bottom: 1px solid var(--color-secondary-light);
}

.blog.tabs .nav-tabs .nav-link {
    color: var(--color-primary);
    font-family: var(--opensans);
    font-size: var(--fs-18);
    border: none;
    padding-inline: 0;
    border-bottom: 5px solid transparent;
}

.blog.tabs .nav-tabs .nav-link.active {
    border: none;
    font-weight: 600;
    border-bottom: 5px solid var(--color-secondary);
}

.blog.tabs .tab-content {
    padding-block-start: 49px;
}

/* grid blogCard */
.blog.tabs .blogGrid {
    display: grid;
    grid-template-columns: 1fr;
    place-items: start center;
    gap: 48px;
}

@media (min-width:768px) {
    .blog.tabs .nav-tabs {
        padding: 0;
        margin: 0;
        display: flex;
        justify-content: center;
        gap: 59px;
    }

    .blog.tabs .blogGrid {
        grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));

    }
}

@media (min-width:1440px) {
    .blog.tabs .blogGrid {
        grid-template-columns: repeat(auto-fill, minmax(393px, 1fr));
    }
}

/**
 * Blog:tabs (infinite scroll)
 * ---------------------------------------------
 */


.blog.tabs .blog-infiniteScroll .spinner-grow {
    background: var(--color-primary);
}



/**
 * Blog:tabs (blog-pagination)
 * ---------------------------------------------
 */

.blog-pagination .blogGrid {
    padding-bottom: 73px;
}