.mt-10 {
    margin-top: 10rem;
}

.pb-1 {
    padding-bottom: 1rem;
}

.pb-2 {
    padding-bottom: 2rem;
}

.py-3 {
    padding-block: 3rem;
}

.pb-half-rem {
    padding-bottom: .5rem;
}


.pt-half-rem {
    padding-top: .5rem;
}

.mb-2 {
    margin-bottom: 2rem;
}

.mw-50 {
    max-width: 50rem;
}

.mw-60 {
    max-width: 60rem;
}

.mw-100 {
    max-width: 100rem;
}

.max-content {
    max-width: max-content;
    padding-inline: 3rem;
}

.position-relative {
    position: relative;
}

.position-absolute {
    position: absolute;
}

.position-fixed {
    position: fixed;
}

.hidden {
    display: none !important;
}

.position-relative {
    position: relative;
}

.position-absolute {
    position: absolute;
}

.color-inherit {
    color: inherit;
}

/* grid properties */
.grid {
    display: grid;
}

.grid-col-1 {
    grid-template-columns: 1fr;
}

.grid-col-2 {
    grid-template-columns: repeat(2, 1fr);
}

.grid-col-3 {
    grid-template-columns: repeat(3, 1fr);
}

.grid-col-4 {
    grid-template-columns: repeat(4, 1fr);
}

.grid-col-5 {
    grid-template-columns: repeat(5, 1fr);
}

.grid-col-6 {
    grid-template-columns: repeat(6, 1fr);
}

.grid-row-1 {
    grid-template-rows: 1fr;
}

.grid-row-2 {
    grid-template-rows: repeat(2, 1fr);
}

.grid-row-3 {
    grid-template-rows: repeat(3, 1fr);
}

/* grid properties end */

/* flex properties */
.flex {
    display: flex;
}

.flex-col {
    flex-direction: column;
}

.flex-1 {
    flex: 1;
}

/* flex properties end*/

/* gap & alignment */
.gap-3px {
    gap: 3px;
}

.gap-5px {
    gap: 5px;
}

.gap-1 {
    gap: 1rem;
}

.gap-2 {
    gap: 2rem;
}

.gap-3 {
    gap: 3rem;
}

.gap-4 {
    gap: 4rem;
}

.gap-10 {
    gap: 10rem;
}

.gap-col-1 {
    column-gap: 1rem;
}

.gap-col-2 {
    column-gap: 2rem;
}

.gap-row-1 {
    row-gap: 1rem;
}

.gap-row-2 {
    row-gap: 2rem;
}

.text-center {
    display: block;
    text-align: center;
}

.text-right {
    display: block;
    text-align: right;
}

.center-xy {
    justify-content: center;
    align-items: center;
}

.justify-content-center {
    justify-content: center;
}

.align-items-center {
    align-items: center;
}

.align-items-baseline {
    align-items: baseline;
}

.justify-content-between {
    justify-content: space-between;
}

.justify-self-center {
    justify-self: center;
    /*width: var(--viewport-medium);*/
}

/* gap & alignment end */

.grid-auto-col {
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
}


/*  margin  */
.m-1 {
    margin: 1rem;
}

.m-2 {
    margin: 2rem;
}

.m-3 {
    margin: 3rem;
}

.m-4 {
    margin: 4rem;
}

.m-5 {
    margin: 5rem;
}

.m-6 {
    margin: 6rem;
}

.mt-1 {
    margin-top: 1rem;
}

.mt-2 {
    margin-top: 2rem;
}

.mt-3 {
    margin-top: 3rem;
}

.mt-4 {
    margin-top: 4rem;
}

.mt-5 {
    margin-top: 5rem;
}

.mt-6 {
    margin-top: 6rem;
}

.mb-1 {
    margin-bottom: 1rem;
}

.mb-2 {
    margin-bottom: 2rem;
}

.mb-3 {
    margin-bottom: 3rem;
}

.mb-4 {
    margin-bottom: 4rem;
}

.mb-5 {
    margin-bottom: 5rem;
}

.mb-6 {
    margin-bottom: 6rem;
}

.my-1 {
    margin-block: 1rem;
}

.my-2 {
    margin-block: 2rem;
}

.my-3 {
    margin-block: 3rem;
}

.my-4 {
    margin-block: 4rem;
}

.my-5 {
    margin-block: 5rem;
}

.my-6 {
    margin-block: 6rem;
}

.mx-1 {
    margin-inline: 1rem;
}

.mx-2 {
    margin-inline: 2rem;
}

.mx-3 {
    margin-inline: 3rem;
}

.mx-4 {
    margin-inline: 4rem;
}

.mx-5 {
    margin-inline: 5rem;
}

.mx-6 {
    margin-inline: 6rem;
}

.ml-1 {
    margin-left: 1rem;
}

.ml-2 {
    margin-left: 2rem;
}

.ml-3 {
    margin-left: 3rem;
}

.ml-4 {
    margin-left: 4rem;
}

.ml-5 {
    margin-left: 5rem;
}

.ml-6 {
    margin-left: 6rem;
}

.mr-1 {
    margin-right: 1rem;
}

.mr-2 {
    margin-right: 2rem;
}

.mr-3 {
    margin-right: 3rem;
}

.mr-4 {
    margin-right: 4rem;
}

.mr-5 {
    margin-right: 5rem;
}

.mr-6 {
    margin-right: 6rem;
}

/* margin end */

/*  padding  */
.p-0 {
    padding: 0;
}

.p-1 {
    padding: 1rem;
}

.p-2 {
    padding: 2rem;
}

.p-3 {
    padding: 3rem;
}

.p-4 {
    padding: 4rem;
}

.p-5 {
    padding: 5rem;
}

.p-6 {
    padding: 6rem;
}

.pt-1 {
    padding-top: 1rem;
}

.pt-2 {
    padding-top: 2rem;
}

.pt-3 {
    padding-top: 3rem;
}

.pt-4 {
    padding-top: 4rem;
}

.pt-5 {
    padding-top: 5rem;
}

.pt-6 {
    padding-top: 6rem;
}

.pt-8 {
    padding-top: 8rem;
}

.pb-1 {
    padding-bottom: 1rem;
}

.pb-2 {
    padding-bottom: 2rem;
}

.pb-3 {
    padding-bottom: 3rem;
}

.pb-4 {
    padding-bottom: 4rem;
}

.pb-5 {
    padding-bottom: 5rem;
}

.pb-6 {
    padding-bottom: 6rem;
}

.pl-1 {
    padding-left: 1rem;
}

.pl-2 {
    padding-left: 2rem;
}

.pl-3 {
    padding-left: 3rem;
}

.pl-4 {
    padding-left: 4rem;
}

.pl-5 {
    padding-left: 5rem;
}

.pl-6 {
    padding-left: 6rem;
}

.py-1 {
    padding-block: 1rem;
}

.py-2 {
    padding-block: 2rem;
}

.py-3 {
    padding-block: 3rem;
}

.py-4 {
    padding-block: 4rem;
}

.py-5 {
    padding-block: 5rem;
}

.py-6 {
    padding-block: 6rem;
}

.px-1 {
    padding-inline: 1rem;
}

.px-2 {
    padding-inline: 2rem;
}

.px-3 {
    padding-inline: 3rem;
}

.px-4 {
    padding-inline: 4rem;
}

.px-5 {
    padding-inline: 5rem;
}

.px-6 {
    padding-inline: 6rem;
}

/* padding end */

.h-100pt {
    height: 100%;
}

.h-100vh {
    height: 100vh;
}

.w-100pt {
    width: 100%;
}

.w-100vw {
    width: 100vw;
}

.text-uppercase {
    text-transform: uppercase;
}

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

    .grid-col-md-2 {
        grid-template-columns: repeat(2, 1fr);
    }

    .grid-col-md-3 {
        grid-template-columns: repeat(3, 1fr);
    }

    .grid-col-md-4 {
        grid-template-columns: repeat(4, 1fr);
    }

    .grid-row-md-2 {
        grid-template-rows: repeat(2, 1fr);
    }

    .grid-row-md-3 {
        grid-template-rows: repeat(3, 1fr);
    }

    .grid-auto-col-md {
        grid-auto-flow: column;
        grid-auto-columns: 1fr;
    }

    .flex-md {
        display: flex;
    }

    .flex-col-md {
        flex-direction: column;
    }

    .gap-md-3px {
        gap: 3px;
    }

    .gap-md-5px {
        gap: 5px;
    }

    .gap-md-1 {
        gap: 1rem;
    }

    .gap-md-2 {
        gap: 2rem;
    }

    .gap-md-3 {
        gap: 3rem;
    }

    .gap-md-4 {
        gap: 4rem;
    }

    .justify-content-center-md {
        justify-content: center;
    }

    .align-items-center-md {
        align-items: center;
    }

    .align-items-baseline-md {
        align-items: baseline;
    }

    .justify-content-between-md {
        justify-content: space-between;
    }

    .mb-md-0 {
        margin-bottom: 0;
    }

    .mb-md-2 {
        margin-bottom: 2rem;
    }

    .mt-md-0 {
        margin-top: 0;
    }

    .mt-md-1 {
        margin-top: 1rem;
    }

    .mt-md-2 {
        margin-top: 2rem;
    }

    .mt-md-3 {
        margin-top: 3rem;
    }

    .mt-md-4 {
        margin-top: 4rem;
    }
}

@media only screen and (min-width: 1024px) {
    .flex-lg {
        display: flex;
    }
    
    .grid-col-lg-2 {
        grid-template-columns: repeat(2, 1fr);
    }

    .grid-col-lg-3 {
        grid-template-columns: repeat(3, 1fr);
    }

    .grid-col-lg-4 {
        grid-template-columns: repeat(4, 1fr);
    }

    .grid-row-lg-2 {
        grid-template-rows: repeat(2, 1fr);
    }

    .grid-auto-col-lg {
        grid-auto-flow: column;
        grid-auto-columns: 1fr;
    }

    .gap-lg-1 {
        gap: 1rem;
    }

    .gap-lg-2 {
        gap: 2rem;
    }

    .gap-lg-3 {
        gap: 3rem;
    }

    .gap-lg-4 {
        gap: 4rem;
    }

    .mt-lg-0 {
        margin-top: 0;
    }

    .mt-lg-1 {
        margin-top: 1rem;
    }

    .mt-lg-2 {
        margin-top: 2rem;
    }

    .mt-lg-3 {
        margin-top: 3rem;
    }
}