.cds-grid-container {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    padding: 0;
    overflow: auto;
}

.cds-grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    width: 100%;
    height: fit-content;
}

.cds-grid-vertical {
    display: grid;
    grid-template-rows: repeat(12, 1fr);
    width: 100%;
    height: 100%;
}

.cds-grid-view {
    display: grid;
    grid-template-columns: repeat(10, 1fr);
    width: 100%;
    height: fit-content;
    padding-top: 4px;
}

.grid-gap-2 {
    column-gap: 2px;
}

.grid-gap-4 {
    column-gap: 4px;
}

.grid-gap-8 {
    column-gap: 8px;
}

.grid-gap-16 {
    column-gap: 16px;
}

.grid-gap-24 {
    column-gap: 24px;
}

.grid-gap-32 {
    column-gap: 32px;
}

.grid-gap-64 {
    column-gap: 64px;
}

.grid-row-2 {
    row-gap: 2px;
}

.grid-row-4 {
    row-gap: 4px;
}

.grid-row-8 {
    row-gap: 8px;
}

.grid-row-16 {
    row-gap: 16px;
}

.grid-row-24 {
    row-gap: 24px;
}

.grid-row-32 {
    row-gap: 32px;
}

.grid-row-64 {
    row-gap: 64px;
}

/* Extra small (phones, 576px and down) */
@media only screen and (max-width: 576px) {
    [class*="col-"] {
        grid-column: span 12 !important;
    }

    .cds-grid-view {grid-template-columns: repeat(12, 1fr);}
}

/* Small (portrait tablets and large phones, 576px and up) */
@media only screen and (min-width: 576px) {
    div.col-xxl-12 {display: flex; flex-direction: column; grid-column: span 12;}
    div.col-xxl-11 {display: flex; flex-direction: column; grid-column: span 11;}
    div.col-xxl-10 {display: flex; flex-direction: column; grid-column: span 10;}
    div.col-xxl-9 {display: flex; flex-direction: column; grid-column: span 9;}
    div.col-xxl-8 {display: flex; flex-direction: column; grid-column: span 8;}
    div.col-xxl-7 {display: flex; flex-direction: column; grid-column: span 7;}
    div.col-xxl-6 {display: flex; flex-direction: column; grid-column: span 6;}
    div.col-xxl-5 {display: flex; flex-direction: column; grid-column: span 5;}
    div.col-xxl-4 {display: flex; flex-direction: column; grid-column: span 4;}
    div.col-xxl-3 {display: flex; flex-direction: column; grid-column: span 3;}
    div.col-xxl-2 {display: flex; flex-direction: column; grid-column: span 2;}
    div.col-xxl-1 {display: flex; flex-direction: column; grid-column: span 1;}
    
    div.col-xl-12 {display: flex; flex-direction: column; grid-column: span 12;}
    div.col-xl-11 {display: flex; flex-direction: column; grid-column: span 11;}
    div.col-xl-10 {display: flex; flex-direction: column; grid-column: span 10;}
    div.col-xl-9 {display: flex; flex-direction: column; grid-column: span 9;}
    div.col-xl-8 {display: flex; flex-direction: column; grid-column: span 8;}
    div.col-xl-7 {display: flex; flex-direction: column; grid-column: span 7;}
    div.col-xl-6 {display: flex; flex-direction: column; grid-column: span 6;}
    div.col-xl-5 {display: flex; flex-direction: column; grid-column: span 5;}
    div.col-xl-4 {display: flex; flex-direction: column; grid-column: span 4;}
    div.col-xl-3 {display: flex; flex-direction: column; grid-column: span 3;}
    div.col-xl-2 {display: flex; flex-direction: column; grid-column: span 2;}
    div.col-xl-1 {display: flex; flex-direction: column; grid-column: span 1;}
    
    div.col-l-12 {display: flex; flex-direction: column; grid-column: span 12;}
    div.col-l-11 {display: flex; flex-direction: column; grid-column: span 11;}
    div.col-l-10 {display: flex; flex-direction: column; grid-column: span 10;}
    div.col-l-9 {display: flex; flex-direction: column; grid-column: span 9;}
    div.col-l-8 {display: flex; flex-direction: column; grid-column: span 8;}
    div.col-l-7 {display: flex; flex-direction: column; grid-column: span 7;}
    div.col-l-6 {display: flex; flex-direction: column; grid-column: span 6;}
    div.col-l-5 {display: flex; flex-direction: column; grid-column: span 5;}
    div.col-l-4 {display: flex; flex-direction: column; grid-column: span 4;}
    div.col-l-3 {display: flex; flex-direction: column; grid-column: span 3;}
    div.col-l-2 {display: flex; flex-direction: column; grid-column: span 2;}
    div.col-l-1 {display: flex; flex-direction: column; grid-column: span 1;}
    
    div.col-m-12 {display: flex; flex-direction: column; grid-column: span 12;}
    div.col-m-11 {display: flex; flex-direction: column; grid-column: span 11;}
    div.col-m-10 {display: flex; flex-direction: column; grid-column: span 10;}
    div.col-m-9 {display: flex; flex-direction: column; grid-column: span 9;}
    div.col-m-8 {display: flex; flex-direction: column; grid-column: span 8;}
    div.col-m-7 {display: flex; flex-direction: column; grid-column: span 7;}
    div.col-m-6 {display: flex; flex-direction: column; grid-column: span 6;}
    div.col-m-5 {display: flex; flex-direction: column; grid-column: span 5;}
    div.col-m-4 {display: flex; flex-direction: column; grid-column: span 4;}
    div.col-m-3 {display: flex; flex-direction: column; grid-column: span 3;}
    div.col-m-2 {display: flex; flex-direction: column; grid-column: span 2;}
    div.col-m-1 {display: flex; flex-direction: column; grid-column: span 1;}

    div.col-s-12 {display: flex; flex-direction: column; grid-column: span 12;}
    div.col-s-11 {display: flex; flex-direction: column; grid-column: span 11;}
    div.col-s-10 {display: flex; flex-direction: column; grid-column: span 10;}
    div.col-s-9 {display: flex; flex-direction: column; grid-column: span 9;}
    div.col-s-8 {display: flex; flex-direction: column; grid-column: span 8;}
    div.col-s-7 {display: flex; flex-direction: column; grid-column: span 7;}
    div.col-s-6 {display: flex; flex-direction: column; grid-column: span 6;}
    div.col-s-5 {display: flex; flex-direction: column; grid-column: span 5;}
    div.col-s-4 {display: flex; flex-direction: column; grid-column: span 4;}
    div.col-s-3 {display: flex; flex-direction: column; grid-column: span 3;}
    div.col-s-2 {display: flex; flex-direction: column; grid-column: span 2;}
    div.col-s-1 {display: flex; flex-direction: column; grid-column: span 1;}

    .cds-grid-view {grid-template-columns: repeat(12, 1fr);}
}

/* Medium (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {
    div.col-xxl-12 {display: flex; flex-direction: column; grid-column: span 12;}
    div.col-xxl-11 {display: flex; flex-direction: column; grid-column: span 11;}
    div.col-xxl-10 {display: flex; flex-direction: column; grid-column: span 10;}
    div.col-xxl-9 {display: flex; flex-direction: column; grid-column: span 9;}
    div.col-xxl-8 {display: flex; flex-direction: column; grid-column: span 8;}
    div.col-xxl-7 {display: flex; flex-direction: column; grid-column: span 7;}
    div.col-xxl-6 {display: flex; flex-direction: column; grid-column: span 6;}
    div.col-xxl-5 {display: flex; flex-direction: column; grid-column: span 5;}
    div.col-xxl-4 {display: flex; flex-direction: column; grid-column: span 4;}
    div.col-xxl-3 {display: flex; flex-direction: column; grid-column: span 3;}
    div.col-xxl-2 {display: flex; flex-direction: column; grid-column: span 2;}
    div.col-xxl-1 {display: flex; flex-direction: column; grid-column: span 1;}
    
    div.col-xl-12 {display: flex; flex-direction: column; grid-column: span 12;}
    div.col-xl-11 {display: flex; flex-direction: column; grid-column: span 11;}
    div.col-xl-10 {display: flex; flex-direction: column; grid-column: span 10;}
    div.col-xl-9 {display: flex; flex-direction: column; grid-column: span 9;}
    div.col-xl-8 {display: flex; flex-direction: column; grid-column: span 8;}
    div.col-xl-7 {display: flex; flex-direction: column; grid-column: span 7;}
    div.col-xl-6 {display: flex; flex-direction: column; grid-column: span 6;}
    div.col-xl-5 {display: flex; flex-direction: column; grid-column: span 5;}
    div.col-xl-4 {display: flex; flex-direction: column; grid-column: span 4;}
    div.col-xl-3 {display: flex; flex-direction: column; grid-column: span 3;}
    div.col-xl-2 {display: flex; flex-direction: column; grid-column: span 2;}
    div.col-xl-1 {display: flex; flex-direction: column; grid-column: span 1;}
    
    div.col-l-12 {display: flex; flex-direction: column; grid-column: span 12;}
    div.col-l-11 {display: flex; flex-direction: column; grid-column: span 11;}
    div.col-l-10 {display: flex; flex-direction: column; grid-column: span 10;}
    div.col-l-9 {display: flex; flex-direction: column; grid-column: span 9;}
    div.col-l-8 {display: flex; flex-direction: column; grid-column: span 8;}
    div.col-l-7 {display: flex; flex-direction: column; grid-column: span 7;}
    div.col-l-6 {display: flex; flex-direction: column; grid-column: span 6;}
    div.col-l-5 {display: flex; flex-direction: column; grid-column: span 5;}
    div.col-l-4 {display: flex; flex-direction: column; grid-column: span 4;}
    div.col-l-3 {display: flex; flex-direction: column; grid-column: span 3;}
    div.col-l-2 {display: flex; flex-direction: column; grid-column: span 2;}
    div.col-l-1 {display: flex; flex-direction: column; grid-column: span 1;}

    div.col-m-12 {display: flex; flex-direction: column; grid-column: span 12;}
    div.col-m-11 {display: flex; flex-direction: column; grid-column: span 11;}
    div.col-m-10 {display: flex; flex-direction: column; grid-column: span 10;}
    div.col-m-9 {display: flex; flex-direction: column; grid-column: span 9;}
    div.col-m-8 {display: flex; flex-direction: column; grid-column: span 8;}
    div.col-m-7 {display: flex; flex-direction: column; grid-column: span 7;}
    div.col-m-6 {display: flex; flex-direction: column; grid-column: span 6;}
    div.col-m-5 {display: flex; flex-direction: column; grid-column: span 5;}
    div.col-m-4 {display: flex; flex-direction: column; grid-column: span 4;}
    div.col-m-3 {display: flex; flex-direction: column; grid-column: span 3;}
    div.col-m-2 {display: flex; flex-direction: column; grid-column: span 2;}
    div.col-m-1 {display: flex; flex-direction: column; grid-column: span 1;}

    .cds-grid-view {grid-template-columns: repeat(12, 1fr);}
}

/* Large (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {
    div.col-xxl-12 {display: flex; flex-direction: column; grid-column: span 12;}
    div.col-xxl-11 {display: flex; flex-direction: column; grid-column: span 11;}
    div.col-xxl-10 {display: flex; flex-direction: column; grid-column: span 10;}
    div.col-xxl-9 {display: flex; flex-direction: column; grid-column: span 9;}
    div.col-xxl-8 {display: flex; flex-direction: column; grid-column: span 8;}
    div.col-xxl-7 {display: flex; flex-direction: column; grid-column: span 7;}
    div.col-xxl-6 {display: flex; flex-direction: column; grid-column: span 6;}
    div.col-xxl-5 {display: flex; flex-direction: column; grid-column: span 5;}
    div.col-xxl-4 {display: flex; flex-direction: column; grid-column: span 4;}
    div.col-xxl-3 {display: flex; flex-direction: column; grid-column: span 3;}
    div.col-xxl-2 {display: flex; flex-direction: column; grid-column: span 2;}
    div.col-xxl-1 {display: flex; flex-direction: column; grid-column: span 1;}
    
    div.col-xl-12 {display: flex; flex-direction: column; grid-column: span 12;}
    div.col-xl-11 {display: flex; flex-direction: column; grid-column: span 11;}
    div.col-xl-10 {display: flex; flex-direction: column; grid-column: span 10;}
    div.col-xl-9 {display: flex; flex-direction: column; grid-column: span 9;}
    div.col-xl-8 {display: flex; flex-direction: column; grid-column: span 8;}
    div.col-xl-7 {display: flex; flex-direction: column; grid-column: span 7;}
    div.col-xl-6 {display: flex; flex-direction: column; grid-column: span 6;}
    div.col-xl-5 {display: flex; flex-direction: column; grid-column: span 5;}
    div.col-xl-4 {display: flex; flex-direction: column; grid-column: span 4;}
    div.col-xl-3 {display: flex; flex-direction: column; grid-column: span 3;}
    div.col-xl-2 {display: flex; flex-direction: column; grid-column: span 2;}
    div.col-xl-1 {display: flex; flex-direction: column; grid-column: span 1;}

    div.col-l-12 {display: flex; flex-direction: column; grid-column: span 12;}
    div.col-l-11 {display: flex; flex-direction: column; grid-column: span 11;}
    div.col-l-10 {display: flex; flex-direction: column; grid-column: span 10;}
    div.col-l-9 {display: flex; flex-direction: column; grid-column: span 9;}
    div.col-l-8 {display: flex; flex-direction: column; grid-column: span 8;}
    div.col-l-7 {display: flex; flex-direction: column; grid-column: span 7;}
    div.col-l-6 {display: flex; flex-direction: column; grid-column: span 6;}
    div.col-l-5 {display: flex; flex-direction: column; grid-column: span 5;}
    div.col-l-4 {display: flex; flex-direction: column; grid-column: span 4;}
    div.col-l-3 {display: flex; flex-direction: column; grid-column: span 3;}
    div.col-l-2 {display: flex; flex-direction: column; grid-column: span 2;}
    div.col-l-1 {display: flex; flex-direction: column; grid-column: span 1;}

    .cds-grid-view {grid-template-columns: repeat(12, 1fr);}
}

/* Extra large (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {
    div.col-xxl-12 {display: flex; flex-direction: column; grid-column: span 12;}
    div.col-xxl-11 {display: flex; flex-direction: column; grid-column: span 11;}
    div.col-xxl-10 {display: flex; flex-direction: column; grid-column: span 10;}
    div.col-xxl-9 {display: flex; flex-direction: column; grid-column: span 9;}
    div.col-xxl-8 {display: flex; flex-direction: column; grid-column: span 8;}
    div.col-xxl-7 {display: flex; flex-direction: column; grid-column: span 7;}
    div.col-xxl-6 {display: flex; flex-direction: column; grid-column: span 6;}
    div.col-xxl-5 {display: flex; flex-direction: column; grid-column: span 5;}
    div.col-xxl-4 {display: flex; flex-direction: column; grid-column: span 4;}
    div.col-xxl-3 {display: flex; flex-direction: column; grid-column: span 3;}
    div.col-xxl-2 {display: flex; flex-direction: column; grid-column: span 2;}
    div.col-xxl-1 {display: flex; flex-direction: column; grid-column: span 1;}

    div.col-xl-12 {display: flex; flex-direction: column; grid-column: span 12;}
    div.col-xl-11 {display: flex; flex-direction: column; grid-column: span 11;}
    div.col-xl-10 {display: flex; flex-direction: column; grid-column: span 10;}
    div.col-xl-9 {display: flex; flex-direction: column; grid-column: span 9;}
    div.col-xl-8 {display: flex; flex-direction: column; grid-column: span 8;}
    div.col-xl-7 {display: flex; flex-direction: column; grid-column: span 7;}
    div.col-xl-6 {display: flex; flex-direction: column; grid-column: span 6;}
    div.col-xl-5 {display: flex; flex-direction: column; grid-column: span 5;}
    div.col-xl-4 {display: flex; flex-direction: column; grid-column: span 4;}
    div.col-xl-3 {display: flex; flex-direction: column; grid-column: span 3;}
    div.col-xl-2 {display: flex; flex-direction: column; grid-column: span 2;}
    div.col-xl-1 {display: flex; flex-direction: column; grid-column: span 1;}

    .cds-grid-view {grid-template-columns: repeat(12, 1fr);}
}

/* Extra large (large laptops and desktops, 1500px and up) */
@media only screen and (min-width: 1500px) {
    div.col-xxl-12 {display: flex; flex-direction: column; grid-column: span 12;}
    div.col-xxl-11 {display: flex; flex-direction: column; grid-column: span 11;}
    div.col-xxl-10 {display: flex; flex-direction: column; grid-column: span 10;}
    div.col-xxl-9 {display: flex; flex-direction: column; grid-column: span 9;}
    div.col-xxl-8 {display: flex; flex-direction: column; grid-column: span 8;}
    div.col-xxl-7 {display: flex; flex-direction: column; grid-column: span 7;}
    div.col-xxl-6 {display: flex; flex-direction: column; grid-column: span 6;}
    div.col-xxl-5 {display: flex; flex-direction: column; grid-column: span 5;}
    div.col-xxl-4 {display: flex; flex-direction: column; grid-column: span 4;}
    div.col-xxl-3 {display: flex; flex-direction: column; grid-column: span 3;}
    div.col-xxl-2 {display: flex; flex-direction: column; grid-column: span 2;}
    div.col-xxl-1 {display: flex; flex-direction: column; grid-column: span 1;}

    .cds-grid-view {grid-template-columns: repeat(10, 1fr);}
}