/* ==========================================================================
   Sizing Utilities
   ========================================================================== */

/* Width */
.width-full {
    width: 100%;
}

.width-half {
    width: 50%;
}

.width-third {
    width: 33.333333%;
}

.width-quarter {
    width: 25%;
}

.width-auto {
    width: auto;
}

.width-fit-content {
    width: fit-content;
}

.width-min-content {
    width: min-content;
}

.width-max-content {
    width: max-content;
}

/* Max Width */
.max-width-full {
    max-width: 100%;
}

.max-width-none {
    max-width: none;
}

/* Min Width */
.min-width-0 {
    min-width: 0;
}

.min-width-full {
    min-width: 100%;
}

/* Height */
.height-full {
    height: 100%;
}

.height-half {
    height: 50%;
}

.height-screen {
    height: 100vh;
}

.height-auto {
    height: auto;
}

.height-fit-content {
    height: fit-content;
}

.height-min-content {
    height: min-content;
}

.height-max-content {
    height: max-content;
}

/* Max Height */
.max-height-full {
    max-height: 100%;
}

.max-height-screen {
    max-height: 100vh;
}

.max-height-none {
    max-height: none;
}

/* Min Height */
.min-height-0 {
    min-height: 0;
}

.min-height-full {
    min-height: 100%;
}

.min-height-screen {
    min-height: 100vh;
}

/* Square Sizes */
.size-1 {
    width: var(--size-1);
    height: var(--size-1);
}

.size-2 {
    width: var(--size-2);
    height: var(--size-2);
}

.size-3 {
    width: var(--size-3);
    height: var(--size-3);
}

.size-4 {
    width: var(--size-4);
    height: var(--size-4);
}

.size-5 {
    width: var(--size-5);
    height: var(--size-5);
}

.size-6 {
    width: var(--size-6);
    height: var(--size-6);
}

.size-7 {
    width: var(--size-7);
    height: var(--size-7);
}

.size-8 {
    width: var(--size-8);
    height: var(--size-8);
}

.size-9 {
    width: var(--size-9);
    height: var(--size-9);
}

.size-10 {
    width: var(--size-10);
    height: var(--size-10);
}

/* Content Width Containers */
.size-content-1 {
    max-width: var(--size-content-1);
    margin-inline: auto;
}

.size-content-2 {
    max-width: var(--size-content-2);
    margin-inline: auto;
}

.size-content-3 {
    max-width: var(--size-content-3);
    margin-inline: auto;
}

.size-content-4 {
    max-width: var(--size-content-4);
    margin-inline: auto;
}

.size-content-5 {
    max-width: var(--size-content-5);
    margin-inline: auto;
}

.size-content-6 {
    max-width: var(--size-content-6);
    margin-inline: auto;
}

/* Container */
.container {
    --container-width: var(--size-content-4);
    --container-padding-inline: var(--size-3);
    --container-padding-block: var(--size-relative-11);
    padding: var(--container-padding-block) var(--container-padding-inline);
    width: min(90%, var(--container-width));
    margin: 0 auto;

.container-small {
    --container-width: var(--size-content-3);
    --container-padding-inline: var(--size-3);
    --container-padding-block: var(--size-4);
}

.container-large {
    --container-width: var(--size-content-6);
    --container-padding-inline: var(--size-4);
    --container-padding-block: var(--size-relative-12);
}

/* Aspect Ratio */
.aspect-square {
    aspect-ratio: 1;
}

.aspect-video {
    aspect-ratio: 16 / 9;
}

.aspect-portrait {
    aspect-ratio: 3 / 4;
}

.aspect-landscape {
    aspect-ratio: 4 / 3;
}

.aspect-2-3 {
    aspect-ratio: 2 / 3;
}

.aspect-3-2 {
    aspect-ratio: 3 / 2;
}

.aspect-widescreen {
    aspect-ratio: var(--ratio-widescreen);
}

.aspect-ultrawide {
    aspect-ratio: var(--ratio-ultrawide);
}

.aspect-golden {
    aspect-ratio: var(--ratio-golden);
}

/* Responsive Container */
@media (max-width: 767px) {
    .container,
    .container-small,
    .container-large {
        padding: var(--size-3) var(--size-2);
    }
}