:root {
    --grid-gutter: 2rem;
}

.wrapper{
    --bs-gutter-x: 1.5rem;
    --bs-gutter-y: 0;
    width: 100%;
    padding-right: calc(var(--bs-gutter-x)* .5);
    padding-left: calc(var(--bs-gutter-x)* .5);
    margin-right: auto;
    margin-left: auto;
}

.wrapper-full{
    width:100%;
}

.clear{
    width:100%;
    height:10px;
}

.strip{
    --bs-gutter-x: 1.5rem;
    --bs-gutter-y: 0;
    display: flex;
    flex-wrap: wrap;
    margin-top: calc(-1* var(--bs-gutter-y));
    margin-right: calc(-.5* var(--bs-gutter-x));
    margin-left: calc(-.5* var(--bs-gutter-x));
}

.strip > * {
    flex-shrink: 0;
    width: 100%;
    max-width: 100%;
    padding-right: calc(var(--bs-gutter-x)* .5);
    padding-left: calc(var(--bs-gutter-x)* .5);
    margin-top: var(--bs-gutter-y);
}

.grid-1, .grid-2, .grid-3, .grid-4, .grid-5, .grid-6, .grid-7, .grid-8, .grid-9, .grid-10, .grid-11, .grid-12 {
    box-sizing: border-box;
}

/* .grid{flex: 1 0 0%;} */

.wrapper {max-width: 540px;}
.grid-1 {flex: 0 0 auto; width: calc(100% * 1 / 12);}
.grid-2 {flex: 0 0 auto; width: calc(100% * 2 / 12);}
.grid-3 {flex: 0 0 auto; width: calc(100% * 3 / 12);}
.grid-4 {flex: 0 0 auto; width: calc(100% * 4 / 12);}
.grid-5 {flex: 0 0 auto; width: calc(100% * 5 / 12);}
.grid-6 {flex: 0 0 auto; width: calc(100% * 6 / 12);}
.grid-7 {flex: 0 0 auto; width: calc(100% * 7 / 12);}
.grid-8 {flex: 0 0 auto; width: calc(100% * 8 / 12);}
.grid-9 {flex: 0 0 auto; width: calc(100% * 9 / 12);}
.grid-10 {flex: 0 0 auto; width: calc(100% * 10 / 12);}
.grid-11 {flex: 0 0 auto; width: calc(100% * 11 / 12);}
.grid-12 {flex: 0 0 auto; width: calc(100% * 12 / 12);}

/* Media queries for tablets */
@media (min-width: 768px) {
    .wrapper { max-width: 720px; }
    .grid-tablet-1 { flex: 0 0 auto; width: calc(100% * 1 / 12); }
    .grid-tablet-2 { flex: 0 0 auto; width: calc(100% * 2 / 12); }
    .grid-tablet-3 { flex: 0 0 auto; width: calc(100% * 3 / 12); }
    .grid-tablet-4 { flex: 0 0 auto; width: calc(100% * 4 / 12); }
    .grid-tablet-5 { flex: 0 0 auto; width: calc(100% * 5 / 12); }
    .grid-tablet-6 { flex: 0 0 auto; width: calc(100% * 6 / 12); }
    .grid-tablet-7 { flex: 0 0 auto; width: calc(100% * 7 / 12); }
    .grid-tablet-8 { flex: 0 0 auto; width: calc(100% * 8 / 12); }
    .grid-tablet-9 { flex: 0 0 auto; width: calc(100% * 9 / 12); }
    .grid-tablet-10 { flex: 0 0 auto; width: calc(100% * 10 / 12); }
    .grid-tablet-11 { flex: 0 0 auto; width: calc(100% * 11 / 12); }
    .grid-tablet-12 { flex: 0 0 auto; width: calc(100% * 12 / 12); }
}

/* Media queries for laptop */
@media (min-width: 992px) {
    .wrapper {max-width: 960px;}
    .grid-laptop-1 {flex: 0 0 auto; width: calc(100% * 1 / 12)}
    .grid-laptop-2 {flex: 0 0 auto; width: calc(100% * 2 / 12)}
    .grid-laptop-3 {flex: 0 0 auto; width: calc(100% * 3 / 12)}
    .grid-laptop-4 {flex: 0 0 auto; width: calc(100% * 4 / 12)}
    .grid-laptop-5 {flex: 0 0 auto; width: calc(100% * 5 / 12)}
    .grid-laptop-6 {flex: 0 0 auto; width: calc(100% * 6 / 12)}
    .grid-laptop-7 {flex: 0 0 auto; width: calc(100% * 7 / 12)}
    .grid-laptop-8 {flex: 0 0 auto; width: calc(100% * 8 / 12)}
    .grid-laptop-9 {flex: 0 0 auto; width: calc(100% * 9 / 12)}
    .grid-laptop-10 {flex: 0 0 auto; width: calc(100% * 10 / 12)}
    .grid-laptop-11 {flex: 0 0 auto; width: calc(100% * 11 / 12)}
    .grid-laptop-12 {flex: 0 0 auto; width: calc(100% * 12 / 12)}
}

/* Media queries for desktop */
@media (min-width: 1200px) {
    .wrapper {max-width: 1140px;}
    .grid-desktop-1 {flex: 0 0 auto; width: calc(100% * 1 / 12)}
    .grid-desktop-2 {flex: 0 0 auto; width: calc(100% * 2 / 12)}
    .grid-desktop-3 {flex: 0 0 auto; width: calc(100% * 3 / 12)}
    .grid-desktop-4 {flex: 0 0 auto; width: calc(100% * 4 / 12)}
    .grid-desktop-5 {flex: 0 0 auto; width: calc(100% * 5 / 12)}
    .grid-desktop-6 {flex: 0 0 auto; width: calc(100% * 6 / 12)}
    .grid-desktop-7 {flex: 0 0 auto; width: calc(100% * 7 / 12)}
    .grid-desktop-8 {flex: 0 0 auto; width: calc(100% * 8 / 12)}
    .grid-desktop-9 {flex: 0 0 auto; width: calc(100% * 9 / 12)}
    .grid-desktop-10 {flex: 0 0 auto; width: calc(100% * 10 / 12)}
    .grid-desktop-11 {flex: 0 0 auto; width: calc(100% * 11 / 12)}
    .grid-desktop-12 {flex: 0 0 auto; width: calc(100% * 12 / 12)}
}

/* Media queries for full */
@media (min-width: 1400px) {
    .wrapper {max-width: 1320px;}
    .grid-full-1 {flex: 0 0 auto; width: calc(100% * 1 / 12)}
    .grid-full-2 {flex: 0 0 auto; width: calc(100% * 2 / 12)}
    .grid-full-3 {flex: 0 0 auto; width: calc(100% * 3 / 12)}
    .grid-full-4 {flex: 0 0 auto; width: calc(100% * 4 / 12)}
    .grid-full-5 {flex: 0 0 auto; width: calc(100% * 5 / 12)}
    .grid-full-6 {flex: 0 0 auto; width: calc(100% * 6 / 12)}
    .grid-full-7 {flex: 0 0 auto; width: calc(100% * 7 / 12)}
    .grid-full-8 {flex: 0 0 auto; width: calc(100% * 8 / 12)}
    .grid-full-9 {flex: 0 0 auto; width: calc(100% * 9 / 12)}
    .grid-full-10 {flex: 0 0 auto; width: calc(100% * 10 / 12)}
    .grid-full-11 {flex: 0 0 auto; width: calc(100% * 11 / 12)}
    .grid-full-12 {flex: 0 0 auto; width: calc(100% * 12 / 12)}
}