/*
|--------------------------------------------------------------------------
| Reusable Utility Classes
|--------------------------------------------------------------------------
|
| Only utilities not already adequately provided by Bootstrap.
|
*/


/* Spacing
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */

.mt-6 { margin-top: 4rem !important; }
.mt-7 { margin-top: 5rem !important; }
.mt-8 { margin-top: 6rem !important; }

.mb-6 { margin-bottom: 4rem !important; }
.mb-7 { margin-bottom: 5rem !important; }
.mb-8 { margin-bottom: 6rem !important; }

.my-6 { margin-top: 4rem !important; margin-bottom: 4rem !important; }
.my-7 { margin-top: 5rem !important; margin-bottom: 5rem !important; }
.my-8 { margin-top: 6rem !important; margin-bottom: 6rem !important; }

.pt-6 { padding-top: 4rem !important; }
.pt-7 { padding-top: 5rem !important; }
.pt-8 { padding-top: 6rem !important; }

.pb-6 { padding-bottom: 4rem !important; }
.pb-7 { padding-bottom: 5rem !important; }
.pb-8 { padding-bottom: 6rem !important; }

.py-6 { padding-top: 4rem !important; padding-bottom: 4rem !important; }
.py-7 { padding-top: 5rem !important; padding-bottom: 5rem !important; }
.py-8 { padding-top: 6rem !important; padding-bottom: 6rem !important; }


/* Width / Height
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */

.w-fit { width: fit-content !important; }
.h-fit { height: fit-content !important; }
.min-w-0 { min-width: 0 !important; }
.max-w-100 { max-width: 100% !important; }


/* Text
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */

.text-balance { text-wrap: balance; }


/* Line Clamp
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */

.line-clamp-1, .line-clamp-2, .line-clamp-3, .line-clamp-4 {
   display: -webkit-box;
   overflow: hidden;
   -webkit-box-orient: vertical;
}

.line-clamp-1 { -webkit-line-clamp: 1; line-clamp: 1; }
.line-clamp-2 { -webkit-line-clamp: 2; line-clamp: 2; }
.line-clamp-3 { -webkit-line-clamp: 3; line-clamp: 3; }
.line-clamp-4 { -webkit-line-clamp: 4; line-clamp: 4; }


/* Aspect Ratio
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */

.aspect-square { aspect-ratio: 1 / 1; }
.aspect-video { aspect-ratio: 16 / 9; }
.aspect-portrait { aspect-ratio: 4 / 5; }
.aspect-landscape { aspect-ratio: 4 / 3; }


/* Overflow
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */

.overflow-x-hidden { overflow-x: hidden !important; }
.overflow-y-auto { overflow-y: auto !important; }