/* containers */
.container-grid-row {
    display: grid;
    grid-auto-rows: 1fr;
    grid-column-gap: var(--doublegap);
    grid-row-gap: var(--doublegap);
}
.container-grid-col {
    display: flex;
    flex-wrap: wrap;
}
.container-grid-col > * {
    width: 100%;
}
.container-count-4 .container-grid-row,
.container-count-7 .container-grid-row,
.container-count-8 .container-grid-row,
.container-count-10 .container-grid-row,
.container-count-11 .container-grid-row,
.container-count-12 .container-grid-row,
.container-grid-float .container-grid-row,
.container-grid-1-1-1-1 .container-grid-row {
    grid-template-columns: repeat(4, 1fr);
}
.container-grid-1-1 .container-grid-row,
.container-count-2 .container-grid-row {
    grid-template-columns: repeat(2, 1fr);
}
.container-grid-1-1-1 .container-grid-row,
.container-count-3 .container-grid-row,
.container-count-5 .container-grid-row,
.container-count-6 .container-grid-row,
.container-count-9 .container-grid-row {
    grid-template-columns: repeat(3, 1fr);
}
.container-grid-2-1 .container-grid-row {
    grid-template-columns: 2fr 1fr;
}
.container-grid-1-2 .container-grid-row {
    grid-template-columns: 1fr 2fr;
}


.container-grid-row h2,
.container-grid-row h3,
.container-grid-row h4,
.container-grid-row h5,
.container-grid-row h6 {
    margin-top: 0;
}
.container-grid img {
    width: 100%;
    height: auto;
}


/* Responsive Section */
@media only screen 
    and (max-width: 1023px) 
{
.container-count-4 .container-grid-row,
.container-count-7 .container-grid-row,
.container-count-8 .container-grid-row,
.container-count-10 .container-grid-row,
.container-count-11 .container-grid-row,
.container-count-12 .container-grid-row,
.container-grid-float .container-grid-row,
.container-grid-1-1-1-1 .container-grid-row {
    grid-template-columns: repeat(2, 1fr);
}
}


    
@media only screen 
    and (max-width: 767px) 
{
.container-grid-1-1-1 .container-grid-row,
.container-count-3 .container-grid-row,
.container-count-5 .container-grid-row,
.container-count-6 .container-grid-row,
.container-count-9 .container-grid-row {
    grid-template-columns: repeat(2, 1fr);
}
.container-grid-1-1-1 .container-grid-col:nth-child(3n+3),
.container-count-3 .container-grid-col:nth-child(3),
.container-count-5 .container-grid-col:nth-child(3),
.container-count-9 .container-grid-col:nth-child(5) {
    grid-column: span 2;
}

}


@media only screen 
    and (max-width: 497px) 
{
.container-grid-row {
    display: block !important;
}
.container-grid .container-grid-col {
    width: 100%;
    margin-bottom: var(--doublegap);
}

}