:root {
    --space-padding-default: 20px;
    --space-padding-tablet: 20px;
    --space-padding-mobile: 15px;
}
body{
    margin: 0; padding: 0;
}
.container {
    width: 100%;
    margin: 0 auto;
    padding: var(--space-padding-default) 125px;
    box-sizing: border-box;
}
.container-fluid {
    width: 100%;
    margin: 0;
    padding: var(--space-padding-default);
    box-sizing: border-box;
}
.container .row, .container-fluid .row{
    width: 100%;
}
.row {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    box-sizing: border-box;
    align-items: stretch;
}
.gap-0 { gap: 0; }
.gap-5 { gap: 5px; }
.gap-10 { gap: 10px; }
.gap-15 { gap: 15px; }
.gap-20 { gap: 20px; }
.gap-30 { gap: 30px; }

.reverse { direction: rtl; }
.reverse > * { direction: ltr; }
.reverse > .col-12 { order: -1; }
.reverse > .col-12:first-child { order: 999; }
.no-reverse { direction: ltr; }
.no-reverse > * { direction: ltr; }

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

.col {
    grid-column: span 1;
}
[class^="col"], [class*=" col-"] {
    display: flex;
    flex-direction: column;
    padding: var(--space-padding-default);
    box-sizing: border-box;
}
[class^="col"] > *,
[class*=" col-"] > * {
    align-self: flex-start;
    width: auto;
    max-width: 100%;
    box-sizing: border-box;
}
.align-top { justify-content: flex-start; }
.align-middle { justify-content: center; }
.align-bottom { justify-content: flex-end; }

.content-start{
    width: 100%;
    display: inline-block;
}

@media (max-width: 991.98px) {
    .container, .container-fluid {
        padding: var(--space-padding-tablet);
    }

    .gap-md-0 { gap: 0; }
    .gap-md-5 { gap: 5px; }
    .gap-md-10 { gap: 10px; }
    .gap-md-15 { gap: 15px; }
    .gap-md-20 { gap: 20px; }
    .gap-md-30 { gap: 30px; }

    .col-md-1 { grid-column: span 1; }
    .col-md-2 { grid-column: span 2; }
    .col-md-3 { grid-column: span 3; }
    .col-md-4 { grid-column: span 4; }
    .col-md-5 { grid-column: span 5; }
    .col-md-6 { grid-column: span 6; }
    .col-md-7 { grid-column: span 7; }
    .col-md-8 { grid-column: span 8; }
    .col-md-9 { grid-column: span 9; }
    .col-md-10 { grid-column: span 10; }
    .col-md-11 { grid-column: span 11; }
    .col-md-12 { grid-column: span 12; }

    [class^="col"], [class*=" col-"] {
        padding: var(--space-padding-tablet);
    }

    .md-reverse { direction: rtl; }
    .md-reverse > * { direction: ltr; }
    .md-reverse > .col-md-12 { order: -1; }
    .md-reverse > .col-md-12:first-child { order: 999; }
    .md-no-reverse { direction: ltr; }
    .md-no-reverse > * { direction: ltr; }
    .md-no-reverse > .col-md-12 { order: 0; }
    .md-no-reverse > .col-md-12:first-child { order: 0; }

    [class^="col"].align-md-top,
    [class*=" col-"].align-md-top { justify-content: flex-start; }

    [class^="col"].align-md-middle,
    [class*=" col-"].align-md-middle { justify-content: center; }

    [class^="col"].align-md-bottom,
    [class*=" col-"].align-md-bottom { justify-content: flex-end; }
}

@media (max-width: 767.98px) {
    .container, .container-fluid {
        padding: var(--space-padding-mobile);
    }

    .gap-sm-0 { gap: 0; }
    .gap-sm-5 { gap: 5px; }
    .gap-sm-10 { gap: 10px; }
    .gap-sm-15 { gap: 15px; }
    .gap-sm-20 { gap: 20px; }
    .gap-sm-30 { gap: 30px; }

    .col-sm-1 { grid-column: span 1; }
    .col-sm-2 { grid-column: span 2; }
    .col-sm-3 { grid-column: span 3; }
    .col-sm-4 { grid-column: span 4; }
    .col-sm-5 { grid-column: span 5; }
    .col-sm-6 { grid-column: span 6; }
    .col-sm-7 { grid-column: span 7; }
    .col-sm-8 { grid-column: span 8; }
    .col-sm-9 { grid-column: span 9; }
    .col-sm-10 { grid-column: span 10; }
    .col-sm-11 { grid-column: span 11; }
    .col-sm-12 { grid-column: span 12; }

    [class^="col"], [class*=" col-"] {
        padding: var(--space-padding-mobile);
    }

    .sm-reverse { direction: rtl; }
    .sm-reverse > * { direction: ltr; }
    .sm-reverse > .col-sm-12 { order: -1; }
    .sm-reverse > .col-sm-12:first-child { order: 999; }
    .sm-no-reverse { direction: ltr; }
    .sm-no-reverse > * { direction: ltr; }
    .sm-no-reverse > .col-sm-12 { order: 0; }
    .sm-no-reverse > .col-sm-12:first-child { order: 0; }

    [class^="col"].align-sm-top,
    [class*=" col-"].align-sm-top { justify-content: flex-start; }

    [class^="col"].align-sm-middle,
    [class*=" col-"].align-sm-middle { justify-content: center; }

    [class^="col"].align-sm-bottom,
    [class*=" col-"].align-sm-bottom { justify-content: flex-end; }
}