/**
 * Dispaying content
*/

@media screen and (min-width: 0) {
    .d-none,
    .d-xs-none {
        display: none;
    }

    .d-inline,
    .d-xs-inline {
        display: inline;
    }

    .d-inline-block,
    .d-xs-inline-block {
        display: inline-block;
    }

    .d-block,
    .d-xs-block {
        display: block;
    }

    .d-flex,
    .d-xs-flex {
        display: flex;
    }

    .d-xs-grid,
    .d-grid {
        display: grid;
    }
}

@media screen and (min-width: 576px) {
    .d-sm-none {
        display: none;
    }

    .d-sm-inline {
        display: inline;
    }

    .d-sm-inline-block {
        display: inline-block;
    }

    .d-sm-block {
        display: block;
    }

    .d-sm-flex {
        display: flex;
    }

    .d-sm-grid {
        display: grid;
    }
}

@media screen and (min-width: 768px) {
    .d-md-none {
        display: none;
    }

    .d-md-inline {
        display: inline;
    }

    .d-md-inline-block {
        display: inline-block;
    }

    .d-md-block {
        display: block;
    }

    .d-md-flex {
        display: flex;
    }

    .d-md-grid {
        display: grid;
    }
}

@media screen and (min-width: 992px) {
    .d-md-none {
        display: none;
    }

    .d-lg-inline {
        display: block;
    }

    .d-lg-inline-block {
        display: inline-block;
    }

    .d-lg-block {
        display: block;
    }

    .d-lg-flex {
        display: flex;
    }

    .d-lg-grid {
        display: grid;
    }
}

@media screen and (min-width: 1200px) {
    .d-xl-none {
        display: none;
    }

    .d-xl-inline {
        display: inline;
    }

    .d-xl-inline-block {
        display: inline-block;
    }

    .d-xl-block {
        display: block;
    }

    .d-xl-flex {
        display: flex;
    }

    .d-xl-grid {
        display: grid;
    }
}

@media screen and (min-width: 1400px) {
    .d-xxl-none {
        display: none;
    }

    .d-xxl-inline {
        display: inline;
    }

    .d-xxl-inline-block {
        display: inline-block;
    }

    .d-xxl-block {
        display: block;
    }

    .d-xxl-flex {
        display: flex;
    }

    .d-xxl-grid {
        display: grid;
    }
}

/**
 * Container
*/

@media screen and (min-width: 0) {
    .container {
        position: relative;
        margin: 0 auto;
        padding: 0 16px;
        max-width: unset;
    }
}

@media screen and (min-width: 576px) {
    .container {
        max-width: 540px;
        padding: 0 18px;
    }
}

@media screen and (min-width: 768px) {
    .container {
        max-width: 720px;
        padding: 0;
    }
}

@media screen and (min-width: 992px) {
    .container {
        max-width: 960px;
    }
}

@media screen and (min-width: 1200px) {
    .container {
        max-width: 1140px;
    }
}

@media screen and (min-width: 1400px) {
    .container {
        max-width: 1320px;
    }
}


/**
 * Grid
*/

@media screen and (min-width: 0) {
    .grid {
        display: grid;
        grid-template-columns: repeat(12, minmax(0, 1fr));
    
        grid-auto-rows: var(--card-height);
        gap: var(--card-gap);
    }
    
    .grid > * {
        background-color: var(--card-background);
        grid-row: span 1;
        grid-column: span 1;
    }

    .grid > .gr-xs-1 {
        grid-row: span 1;
    }

    .grid > .gr-xs-2 {
        grid-row: span 2;
    }

    .grid > .gr-xs-3 {
        grid-row: span 3;
    }

    .grid > .gr-xs-4 {
        grid-row: span 4;
    }

    .grid > .gr-xs-5 {
        grid-row: span 5;
    }

    .grid > .gr-xs-6 {
        grid-row: span 6;
    }

    .grid > .gr-xs-7 {
        grid-row: span 7;
    }

    .grid > .gr-xs-8  {
        grid-row: span 8;
    }

    .grid > .gr-xs-9 {
        grid-row: span 9;
    }

    .grid > .gr-xs-10 {
        grid-row: span 10;
    }

    .grid > .gr-xs-11 {
        grid-row: span 11;
    }

    .grid > .gr-xs-12 {
        grid-row: span 12;
    }

    .grid > .gc-xs-1 {
        grid-column: span 1;
    }

    .grid > .gc-xs-2 {
        grid-column: span 2;
    }

    .grid > .gc-xs-3 {
        grid-column: span 3;
    }

    .grid > .gc-xs-4 {
        grid-column: span 4;
    }

    .grid > .gc-xs-5 {
        grid-column: span 5;
    }

    .grid > .gc-xs-6 {
        grid-column: span 6;
    }

    .grid > .gc-xs-7 {
        grid-column: span 7;
    }

    .grid > .gc-xs-8 {
        grid-column: span 8;
    }

    .grid > .gc-xs-9 {
        grid-column: span 9;
    }

    .grid > .gc-xs-10 {
        grid-column: span 10;
    }

    .grid > .gc-xs-11 {
        grid-column: span 11;
    }

    .grid > .gc-xs-12 {
        grid-column: span 12;
    }
}

@media screen and (min-width: 576px) {
    .grid > .gr-sm-1 {
        grid-row: span 1;
    }

    .grid > .gr-sm-2 {
        grid-row: span 2;
    }

    .grid > .gr-sm-3 {
        grid-row: span 3;
    }

    .grid > .gr-sm-4 {
        grid-row: span 4;
    }

    .grid > .gr-sm-5 {
        grid-row: span 5;
    }

    .grid > .gr-sm-6 {
        grid-row: span 6;
    }

    .grid > .gr-sm-7 {
        grid-row: span 7;
    }

    .grid > .gr-sm-8 {
        grid-row: span 8;
    }

    .grid > .gr-sm-9 {
        grid-row: span 9;
    }

    .grid > .gr-sm-10 {
        grid-row: span 10;
    }

    .grid > .gr-sm-11 {
        grid-row: span 11;
    }

    .grid > .gr-sm-12 {
        grid-row: span 12;
    }

    .grid > .gc-sm-1 {
        grid-column: span 1;
    }

    .grid > .gc-sm-2 {
        grid-column: span 2;
    }

    .grid > .gc-sm-3 {
        grid-column: span 3;
    }

    .grid > .gc-sm-4 {
        grid-column: span 4;
    }

    .grid > .gc-sm-5 {
        grid-column: span 5;
    }

    .grid > .gc-sm-6 {
        grid-column: span 6;
    }

    .grid > .gc-sm-7 {
        grid-column: span 7;
    }

    .grid > .gc-sm-8 {
        grid-column: span 8;
    }

    .grid > .gc-sm-9 {
        grid-column: span 9;
    }

    .grid > .gc-sm-10 {
        grid-column: span 10;
    }

    .grid > .gc-sm-11 {
        grid-column: span 11;
    }

    .grid > .gc-sm-12 {
        grid-column: span 12;
    }
}

@media screen and (min-width: 768px) {
    .grid > .gr-md-1 {
        grid-row: span 1;
    }

    .grid > .gr-md-2 {
        grid-row: span 2;
    }

    .grid > .gr-md-3 {
        grid-row: span 3;
    }

    .grid > .gr-md-4 {
        grid-row: span 4;
    }

    .grid > .gr-md-5 {
        grid-row: span 5;
    }

    .grid > .gr-md-6 {
        grid-row: span 6;
    }

    .grid > .gr-md-7 {
        grid-row: span 7;
    }

    .grid > .gr-md-8 {
        grid-row: span 8;
    }

    .grid > .gr-md-9 {
        grid-row: span 9;
    }

    .grid > .gr-md-10 {
        grid-row: span 10;
    }

    .grid > .gr-md-11 {
        grid-row: span 11;
    }

    .grid > .gr-md-12 {
        grid-row: span 12;
    }
    
    .grid > .gc-md-1 {
        grid-column: span 1;
    }

    .grid > .gc-md-2 {
        grid-column: span 2;
    }

    .grid > .gc-md-3 {
        grid-column: span 3;
    }

    .grid > .gc-md-4 {
        grid-column: span 4;
    }

    .grid > .gc-md-5 {
        grid-column: span 5;
    }

    .grid > .gc-md-6 {
        grid-column: span 6;
    }

    .grid > .gc-md-7 {
        grid-column: span 7;
    }

    .grid > .gc-md-8 {
        grid-column: span 8;
    }

    .grid > .gc-md-9 {
        grid-column: span 9;
    }

    .grid > .gc-md-10 {
        grid-column: span 10;
    }

    .grid > .gc-md-11 {
        grid-column: span 11;
    }

    .grid > .gc-md-12 {
        grid-column: span 12;
    }
}

@media screen and (min-width: 992px) {
    .grid > .gr-lg-1 {
        grid-row: span 1;
    }

    .grid > .gr-lg-2 {
        grid-row: span 2;
    }

    .grid > .gr-lg-3 {
        grid-row: span 3;
    }

    .grid > .gr-lg-4 {
        grid-row: span 4;
    }

    .grid > .gr-lg-5 {
        grid-row: span 5;
    }

    .grid > .gr-lg-6 {
        grid-row: span 6;
    }

    .grid > .gr-lg-7 {
        grid-row: span 7;
    }

    .grid > .gr-lg-8 {
        grid-row: span 8;
    }

    .grid > .gr-lg-9 {
        grid-row: span 9;
    }

    .grid > .gr-lg-10 {
        grid-row: span 10;
    }

    .grid > .gr-lg-11 {
        grid-row: span 11;
    }

    .grid > .gr-lg-12 {
        grid-row: span 12;
    }
    
    .grid > .gc-lg-1 {
        grid-column: span 1;
    }

    .grid > .gc-lg-2 {
        grid-column: span 2;
    }

    .grid > .gc-lg-3 {
        grid-column: span 3;
    }

    .grid > .gc-lg-4 {
        grid-column: span 4;
    }

    .grid > .gc-lg-5 {
        grid-column: span 5;
    }

    .grid > .gc-lg-6 {
        grid-column: span 6;
    }

    .grid > .gc-lg-7 {
        grid-column: span 7;
    }

    .grid > .gc-lg-8 {
        grid-column: span 8;
    }

    .grid > .gc-lg-9 {
        grid-column: span 9;
    }

    .grid > .gc-lg-10 {
        grid-column: span 10;
    }

    .grid > .gc-lg-11 {
        grid-column: span 11;
    }

    .grid > .gc-lg-12 {
        grid-column: span 12;
    }
}

@media screen and (min-width: 1200px) {
    .grid > .gr-xl-1 {
        grid-row: span 1;
    }

    .grid > .gr-xl-2 {
        grid-row: span 2;
    }

    .grid > .gr-xl-3 {
        grid-row: span 3;
    }

    .grid > .gr-xl-4 {
        grid-row: span 4;
    }

    .grid > .gr-xl-5 {
        grid-row: span 5;
    }

    .grid > .gr-xl-6 {
        grid-row: span 6;
    }

    .grid > .gr-xl-7 {
        grid-row: span 7;
    }

    .grid > .xl-hv-8 {
        grid-row: span 8;
    }

    .grid > .gr-xl-9 {
        grid-row: span 9;
    }

    .grid > .gr-xl-10 {
        grid-row: span 10;
    }

    .grid > .gr-xl-11 {
        grid-row: span 11;
    }

    .grid > .gr-xl-12 {
        grid-row: span 12;
    }
    
    .grid > .gc-xl-1 {
        grid-column: span 1;
    }

    .grid > .gc-xl-2 {
        grid-column: span 2;
    }

    .grid > .gc-xl-3 {
        grid-column: span 3;
    }

    .grid > .gc-xl-4 {
        grid-column: span 4;
    }

    .grid > .gc-xl-5 {
        grid-column: span 5;
    }

    .grid > .gc-xl-6 {
        grid-column: span 6;
    }

    .grid > .gc-xl-7 {
        grid-column: span 7;
    }

    .grid > .gc-xl-8 {
        grid-column: span 8;
    }

    .grid > .gc-xl-9 {
        grid-column: span 9;
    }

    .grid > .gc-xl-10 {
        grid-column: span 10;
    }

    .grid > .gc-xl-11 {
        grid-column: span 11;
    }

    .grid > .gc-xl-12 {
        grid-column: span 12;
    }
}

@media screen and (min-width: 1400px) {
    .grid > .gr-xxl-1 {
        grid-row: span 1;
    }

    .grid > .gr-xxl-2 {
        grid-row: span 2;
    }

    .grid > .gr-xxl-3 {
        grid-row: span 3;
    }

    .grid > .gr-xxl-4 {
        grid-row: span 4;
    }

    .grid > .gr-xxl-5 {
        grid-row: span 5;
    }

    .grid > .gr-xxl-6 {
        grid-row: span 6;
    }

    .grid > .gr-xxl-7 {
        grid-row: span 7;
    }

    .grid > .gr-xxl-8 {
        grid-row: span 8;
    }

    .grid > .gr-xxl-9 {
        grid-row: span 9;
    }

    .grid > .gr-xxl-10 {
        grid-row: span 10;
    }

    .grid > .gr-xxl-11 {
        grid-row: span 11;
    }

    .grid > .gr-xxl-12 {
        grid-row: span 12;
    }
    
    .grid > .gc-xxl-1 {
        grid-column: span 1;
    }

    .grid > .gc-xxl-2 {
        grid-column: span 2;
    }

    .grid > .gc-xxl-3 {
        grid-column: span 3;
    }

    .grid > .gc-xxl-4 {
        grid-column: span 4;
    }

    .grid > .gc-xxl-5 {
        grid-column: span 5;
    }

    .grid > .gc-xxl-6 {
        grid-column: span 6;
    }

    .grid > .gc-xxl-7 {
        grid-column: span 7;
    }

    .grid > .gc-xxl-8 {
        grid-column: span 8;
    }

    .grid > .gc-xxl-9 {
        grid-column: span 9;
    }

    .grid > .gc-xxl-10 {
        grid-column: span 10;
    }

    .grid > .gc-xxl-11 {
        grid-column: span 11;
    }

    .grid > .gc-xxl-12 {
        grid-column: span 12;
    }
}