.container {
    display: flex;
    flex-wrap: wrap;
    position: relative;
    margin: 0 auto;
}
.container > * {
    flex: 1;
    padding: 0 .5rem;
}

/* Align items in flex box */
.al-s {align-items: start}
.al-c {align-items: center}
.al-e {align-items: end}

/* Align self in flex box */
.als-s {align-self: start}
.als-c {align-self: center}
.als-e {align-self: end}

/* Justify content in flex box */
.cnt-s {justify-content: flex-start}
.cnt-c {justify-content: center}
.cnt-e {justify-content: flex-end}
.cnt-b {justify-content: space-between}
.cnt-a {justify-content: space-around}
.cnt-ev {justify-content: space-evenly}

/* Display properties */
.d-none{display: none}
.d-block{display: block}
.d-inline-block{display: inline-block}
.d-inline{display: inline}
.d-flex{display: flex}
.d-grid{display: grid}

/* Flex options */
.flex-wrap{flex-wrap: wrap}
.flex-grow{flex-grow: 1}
.flex-auto{flex: 0 0 auto}
.gap1{gap:1rem}
.gap05{gap:0.5rem}

/* Margin */
.m0 {margin:0!important;}
.m1 {margin:.3125rem}
.m2 {margin:.625rem}
.m3 {margin:1.25rem}
.m4 {margin:1.875rem}
.m5 {margin:3.75rem}
.m-auto{margin:auto}

/* Margin Bottom */
.mb0{margin-bottom:0}
.mb1{margin-bottom:.3125rem}
.mb2{margin-bottom:.625rem}
.mb3{margin-bottom:1.25rem}
.mb4{margin-bottom:1.875rem}
.mb5{margin-bottom:3.75rem}

/* Margin Top */
.mt0{margin-top:0}
.mt1{margin-top:.3125rem}
.mt2{margin-top:.625rem}
.mt3{margin-top:1.25rem}
.mt4{margin-top:1.875rem}
.mt5{margin-top:3.75rem}

/* Horizontal Margin */
.mx0{margin-right:0;margin-left:0}
.mx1{margin-right:.3125rem;margin-left:.3125rem}
.mx2{margin-right:.625rem;margin-left:.625rem}
.mx3{margin-right:1.25rem;margin-left:1.25rem}
.mx4{margin-right:1.875rem;margin-left:1.875rem}
.mx5{margin-right:3.75rem;margin-left:3.75rem}
.mx-auto{margin-right:auto;margin-left:auto}
.ml-auto,.ms-auto{margin-left:auto}
.mr-auto,.me-auto{margin-right:auto}

/* Vertical Margin */
.my0{margin-top:0;margin-bottom:0}
.my1{margin-top:.3125rem;margin-bottom:.3125rem}
.my2{margin-top:.625rem;margin-bottom:.625rem}
.my3{margin-top:1.25rem;margin-bottom:1.25rem}
.my4{margin-top:1.875rem;margin-bottom:1.875rem}
.my5{margin-top:3.75rem;margin-bottom:3.75rem}
.my-auto{margin-top:auto;margin-bottom:auto}

/* Order in flex box */
.o1 {order: 1}
.o2 {order: 2}
.o3 {order: 3}
.o4 {order: 4}
.o5 {order: 5}
.o6 {order: 6}

/* Padding */
.p0 {padding:0!important;}
.p1 {padding:.3125rem}
.p2 {padding:.625rem}
.p3 {padding:1.25rem}
.p4 {padding:1.875rem}
.p5 {padding:3.75rem}

/* Horizontal Padding */
.px0{padding-right:0;padding-left:0}
.px1{padding-right:.3125rem;padding-left:.3125rem}
.px2{padding-right:.625rem;padding-left:.625rem}
.px3{padding-right:1.25rem;padding-left:1.25rem}
.px4{padding-right:1.875rem;padding-left:1.875rem}
.px5{padding-right:3.75rem;padding-left:3.75rem}

/* Vertical Padding */
.py0{padding-top:0;padding-bottom:0}
.py1{padding-top:.3125rem;padding-bottom:.3125rem}
.py2{padding-top:.625rem;padding-bottom:.625rem}
.py3{padding-top:1.25rem;padding-bottom:1.25rem}
.py4{padding-top:1.875rem;padding-bottom:1.875rem}
.py5{padding-top:3.75rem;padding-bottom:3.75rem}

/* Border Radius */
.r0 {border-radius:0}
.r1 {border-radius:.3125rem}
.r2 {border-radius:.625rem}
.r3 {border-radius:1.25rem}
.r-circle {border-radius:50%}

/* top */
.t0 {top:0}
.t1 {top:.3125rem}
.t2 {top:.625rem}
.t3 {top:1.25rem}
.t4 {top:1.875rem}
.t5 {top:3.75rem}

/* Width (division by 1,2,3,4,5,6) */
.w1 {width: 100%;flex: 0 0 100%}
.w2 {width: 50%;flex: 0 0 50%}
.w3 {width: 33.333%;flex: 0 0 33.333%}
.w4 {width: 25%;flex: 0 0 25%}
.w5 {width: 20%;flex: 0 0 20%}
.w6 {width: 16.666%;flex: 0 0 16.666%}
.w7 {width: 16.666%;flex: 0 0 16.666%}
.w12 {width: 8.333%;flex: 0 0 8.333%}
.w066 {width: 66.666%;flex: 0 0 66.666%}
.w075 {width: 75%;flex: 0 0 75%}
.w-auto {width: auto}

.hidden, *.hidden, [hidden] {display:none !important;}

.relative {position: relative}

.sticky {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
}

.s-visible, .m-visible, .l-visible {display: none}





/* Responsive settings */


/* From zero to 768px width. Take care: consist of s-w[0-9] */
@media (max-width: 768px) {
    .container > [class*="s-w"] {
        width: 100%;
        flex: 0 0 100%;
    }
    .container {padding: 0 0.5rem}
}

/* From the small screen and higher */
@media (min-width: 768px) {
    .s-w1 {width: 100%;flex: 0 0 100%}
    .s-w2 {width: 50%;flex: 0 0 50%}
    .s-w3 {width: 33.333%;flex: 0 0 33.333%}
    .s-w4 {width: 25%;flex: 0 0 25%}
    .s-w5 {width: 20%;flex: 0 0 20%}
    .s-w6 {width: 16.666%;flex: 0 0 16.666%}
    .s-w066 {width: 66.666%;flex: 0 0 66.666%}
    .s-w075 {width: 75%;flex: 0 0 75%}
    .s-o1 {order: 1}
    .s-o2 {order: 2}
    .s-o3 {order: 3}
    .s-o4 {order: 4}
    .s-o5 {order: 5}
    .s-o6 {order: 6}
    .s-hidden {display: none}
    .s-flex{display: flex}
    .s-visible {display: inherit}
    .s-sticky {position: sticky}

    /* Align items in flex box */
    .s-al-s {align-items: start}
    .s-al-c {align-items: center}
    .s-al-e {align-items: end}

    /* Justify content in flex box */
    .s-cnt-s {justify-content: flex-start}
    .s-cnt-c {justify-content: center}
    .s-cnt-e {justify-content: flex-end}
    .s-cnt-b {justify-content: space-between}
    .s-cnt-a {justify-content: space-around}
    .s-cnt-ev {justify-content: space-evenly}
}

/* Up to 992px width. Take care: starts with m-w[0-9] */
@media (max-width: 992px) {
    .container > [class^="m-w"] {
        width: 100%;
        flex: 0 0 100%;
    }
}

/* From the medium screen and higher */
@media (min-width: 992px) {
    .m-w1 {width: 100%;flex: 0 0 100%}
    .m-w2 {width: 50%;flex: 0 0 50%}
    .m-w3 {width: 33.333%;flex: 0 0 33.333%}
    .m-w4 {width: 25%;flex: 0 0 25%}
    .m-w5 {width: 20%;flex: 0 0 20%}
    .m-w6 {width: 16.666%;flex: 0 0 16.666%}
    .m-w066 {width: 66.666%;flex: 0 0 66.666%}
    .m-w075 {width: 75%;flex: 0 0 75%}
    .m-o1 {order: 1}
    .m-o2 {order: 2}
    .m-o3 {order: 3}
    .m-o4 {order: 4}
    .m-o5 {order: 5}
    .m-o6 {order: 6}
    .m-hidden {display: none}
    .m-flex{display: flex}
    .m-visible {display: inherit}
    .m-sticky {position: sticky}

    /* Align items in flex box */
    .m-al-s {align-items: start}
    .m-al-c {align-items: center}
    .m-al-e {align-items: end}

    /* Justify content in flex box */
    .m-cnt-s {justify-content: flex-start}
    .m-cnt-c {justify-content: center}
    .m-cnt-e {justify-content: flex-end}
    .m-cnt-b {justify-content: space-between}
    .m-cnt-a {justify-content: space-around}
    .m-cnt-ev {justify-content: space-evenly}

    .container {
        max-width: 70rem;
    }
    .container-md {
        max-width: 58rem;
    }
}

/* Up to 992px width. Take care: starts with m-w[0-9] */
@media (max-width: 1200px) {
    .container > [class^="l-w"] {
        width: 100%;
        flex: 0 0 100%;
    }
}

/* From the large screen and higher */
@media (min-width: 1200px) {
    .l-w1 {width: 100%;flex: 0 0 100%}
    .l-w2 {width: 50%;flex: 0 0 50%}
    .l-w3 {width: 33.333%;flex: 0 0 33.333%}
    .l-w4 {width: 25%;flex: 0 0 25%}
    .l-w5 {width: 20%;flex: 0 0 20%}
    .l-w6 {width: 16.666%;flex: 0 0 16.666%}
    .l-w066 {width: 66.666%;flex: 0 0 66.666%}
    .l-w075 {width: 75%;flex: 0 0 75%}
    .l-o1 {order: 1}
    .l-o2 {order: 2}
    .l-o3 {order: 3}
    .l-o4 {order: 4}
    .l-o5 {order: 5}
    .l-o6 {order: 6}
    .l-hidden {display: none}
    .l-flex{display: flex}
    .l-visible {display: inherit}
    .l-sticky {position: sticky}

    /* Very important: limitation of container's width */
    .container.container-xl {
        max-width: 75rem;
    }

    /* Align items in flex box */
    .l-al-s {align-items: start}
    .l-al-c {align-items: center}
    .l-al-e {align-items: end}

    /* Justify content in flex box */
    .l-cnt-s {justify-content: flex-start}
    .l-cnt-c {justify-content: center}
    .l-cnt-e {justify-content: flex-end}
    .l-cnt-b {justify-content: space-between}
    .l-cnt-a {justify-content: space-around}
    .l-cnt-ev {justify-content: space-evenly}
}