/*--------------- Grid Frames -------------------- */
.fr .fr1, .fr2, .fr3, .fr4, .fr5 .fr6 .fr7 .fr8 .fr9 {
    display: grid;
    padding: 3rem 1.5rem;
    gap: 1.5rem;
}

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

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

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

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

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

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

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

.fr7 {
    grid-template-columns: repeat(7, 1fr);
}

.fr8 {
    grid-template-columns: repeat(8, 1fr);
}

.fr9 {
    grid-template-columns: repeat(9, 1fr);
}

@media (max-width: 60rem) {
    .fr2 {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 99rem) {
    .fr2.w99 {
        grid-template-columns: 1fr;   
        width:50%;
    }
}
/*--------------- Padding-------------------- */
.p-1 {
    padding: 1rem;
}

.p-2 {
    padding: 2rem;
}

.p-3 {
    padding: 3rem;
}

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

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

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

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

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

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

.pr-1 {
    padding-right: 1rem;
}

.pr-2 {
    padding-right: 2rem;
}

.pr-3 {
    padding-right: 3rem;
}

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

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

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


.px-1 {
    padding-left: 1rem;
    padding-right: 1rem;
}

.px-2 {
    padding-left: 2rem;
    padding-right: 2rem;
}

.px-3 {
    padding-left: 3rem;
    padding-right: 3rem;
}


.py-1 {
    padding-top: 1rem;
    padding-bottom: 1rem;
}

.py-2 {
    padding-top: 2rem;
    padding-bottom: 2rem;
}

.py-3 {
    padding-top: 3rem;
    padding-bottom: 3rem;
}

/*--------------- Margins-------------------- */
.mt-1 {
    margin-top: 1rem;
}

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

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

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

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

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

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

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

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

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

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

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

.mx-1 {
    margin-left: 1rem;
    margin-right: 1rem;
}

.mx-2 {
    margin-left: 2rem;
    margin-right: 2rem;
}

.mx-3 {
    margin-left: 3rem;
    margin-right: 3rem;
}

.my-1 {
    margin-top: 1rem;
    margin-bottom: 1rem;
}

.my-2 {
    margin-top: 2rem;
    margin-bottom: 2rem;
}

.my-3 {
    margin-top: 3rem;
    margin-bottom: 3rem;
}
/*--------------- Align -------------------- */

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

.left {
    align-items: flex-start;
    justify-content: start;
    text-align: left;
}

.right {
    align-items: flex-end;
    justify-content: end;
    text-align: right;
}

.right {
    align-items: flex-end;
    justify-content: end;
    text-align: right;
}

/*--------------- Other -------------------- */
.d-none {
    display: none;
}