/*-----------------------------------------------*/
/*-------CSS Grid Blog Layout by Divi Soup-------*/
/*-----------------------------------------------*/


/*Blog layout settings, adjust these values only*/

:root {
    --ds-white: #ffffff; /*The background colour for the post content and text colour for the second and third post content*/
    --ds-grid-2-item: 250px; /*Minimum column width for second grid, decrease this value for more columns*/
    --ds-grid-gap: 30px; /*The gap between posts*/
    --ds-title-background: rgba(0, 0, 0, .5); /*The background colour of the titles on the second and third posts*/
}


/******************************************************/
/*You should not need to edit anything below this line*/
/******************************************************/


/*Set posts to flex and remove post margin*/

.ds-grid-blog .et_pb_post {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    margin-bottom: 0;
}


/*Set flex direction for second grid*/

.ds-grid-blog-2 .et_pb_post {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
}


/*Set post content to flex*/

.ds-grid-blog-content {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    background: var(--ds-white);
}


/*Remove image margin and resize for responsiveness*/

.ds-grid-blog .entry-featured-image-url {
    margin-bottom: 0;
    height: 100%;
    width: auto;
}

.ds-grid-blog .et_pb_post a img {
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
}


/*Reset the read more link display*/

.ds-grid-blog a.more-link {
    display: initial;
}


/*Add margin to excerpt*/

.ds-grid-blog .post-content p {
    margin-bottom: 20px;
}


/*Pagination placement*/

.ds-grid-blog .pagination {
    grid-column: 1/-1;
}


/*Set the grid for the first 3 posts*/

.ds-grid-blog-1 .et_pb_ajax_pagination_container {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-gap: var(--ds-grid-gap);
}


/*Set the grid for the remaining posts*/

.ds-grid-blog-2 .et_pb_ajax_pagination_container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(var(--ds-grid-2-item), 1fr));
    grid-gap: var(--ds-grid-gap);
}


/*First grid first post placement*/

.ds-grid-blog-1 .et_pb_post:first-child {
    grid-column: 1 / -1;
}


/*First grid second post placement*/

.ds-grid-blog-1 .et_pb_post:nth-child(2) {
    grid-column: 1 / 2;
}


/*First grid third post placement*/

.ds-grid-blog-1 .et_pb_post:nth-child(3) {
    grid-column: 2 / 3;
}


/*First post content*/

.ds-grid-blog-1 .et_pb_post:first-child .ds-grid-blog-content {
    width: 60%;
    padding: 30px;
    display: -webkit-box;
    display: -ms-flexbox;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
}


/*Position and colour for second & third posts*/

.ds-grid-blog-1 .et_pb_post:nth-child(n+2) .ds-grid-blog-content {
    background: var(--ds-title-background);
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    padding: 10px;
    text-align: center;
}


/*Text colour for second & third posts*/

.ds-grid-blog-1 .et_pb_post:nth-child(n+2) .entry-title,
.ds-grid-blog-1 .et_pb_post:nth-child(n+2) .post-meta,
.ds-grid-blog-1 .et_pb_post:nth-child(n+2) .post-meta a {
    color: var(--ds-white) !important;
}


/*Font size for second & third posts*/

.ds-grid-blog-1 .et_pb_post:nth-child(n+2) .entry-title {
    font-size: 150% !important;
}


/*Hide excerpt for second & third posts and second grid posts*/

.ds-grid-blog-1 .et_pb_post:nth-child(n+2) .post-content,
.ds-grid-blog-2 .et_pb_post .post-content p {
    display: none;
}


/*Remaining posts display*/

.ds-grid-blog-2 .et_pb_post .ds-grid-blog-content {
    padding: 30px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    height: 100%;
}


/*Set margin for remaining posts*/

.ds-grid-blog-2 .et_pb_post .entry-title {
    margin-bottom: 30px;
}


/*Keep read more link at bottom*/

.ds-grid-blog-2 .et_pb_post .post-content {
    margin-top: auto;
}


/*Adjust for mobile*/

@media all and (max-width:980px) {
    .ds-grid-blog-1 .et_pb_post:first-child {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
    }
    .ds-grid-blog-1 .et_pb_post:first-child .ds-grid-blog-content {
        width: 100%;
    }
    .ds-grid-blog-1 .et_pb_post {
        grid-column: 1 / -1 !important;
    }
}


/*-----------------------------------------------*/
/*-----End CSS Grid Blog Layout by Divi Soup-----*/
/*-----------------------------------------------*/