.h-50 { height: 100% }
.h-100 { height: 100% }
.h-100vh { height: 100vh }

.w-50 { width: 50% }
.w-100 { width: 100% }
.w-100vw { width: 100vw }

/* flex */
.fr { display: flex; }
.fc { display: flex; flex-direction: column; }
.fw-w { flex-wrap: wrap }

.fg-1 { gap: 0.5em }
.fg-2 { gap: 1em }
.fg-3 { gap: 1.5em }
.fg-4 { gap: 2em }
.fg-5 { gap: 2.5em }

.f1 { flex: 1; }
.f2 { flex: 2; }
.f3 { flex: 3; }
.f4 { flex: 4; }
.f5 { flex: 5; }

/* align items */
.ai-bl { align-items: baseline }
.ai-c { align-items: center }
.ai-f { align-items: flex-end }
.ai-s { align-items: flex-start }

/* justify content  */
.jc-c { justify-content: center }
.jc-sa { justify-content: space-around; }
.jc-sb { justify-content: space-between; }
.jc-se { justify-content: space-evenly; }
.jc-fe { justify-content: flex-end; }
.jc-fs { justify-content: flex-start; }
.jc-n { justify-content: normal; }
.jc-r { justify-content: revert; }

/* grid */
.g { display: grid; }
.gtc-1-1 { grid-template-columns: 1fr 1fr; }


/*border-radius*/
.br-1 { border-radius: 0.5em }
.br-2 { border-radius: 1em }
.br-3 { border-radius: 1.5em }
.br-4 { border-radius: 2em }
.br-5 { border-radius: 2.5em }
.br-50 { border-radius: 50% }
.br-100 { border-radius: 100% }
.br-9999 { border-radius: 9999px }


/*overflow*/
.ovf-h { overflow: hidden }
.ovf-x-s { overflow-x: scroll }
.ovf-y-s { overflow-y: scroll }

.hide-scroll-bar {
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
}

/* Hide scrollbar for Chrome, Safari and Opera */
.hide-scroll-bar::-webkit-scrollbar {
    display: none;
}