/* ============================================================
   LAYOUT PERCENTAGE UTILITIES - GSA SoftEng
   Percentage-based layout system for responsive components
   ============================================================ */

/* Width Percentages */
.w-10 {
    width: 10%;
}

.w-20 {
    width: 20%;
}

.w-25 {
    width: 25%;
}

.w-30 {
    width: 30%;
}

.w-33 {
    width: 33.333%;
}

.w-40 {
    width: 40%;
}

.w-50 {
    width: 50%;
}

.w-60 {
    width: 60%;
}

.w-66 {
    width: 66.666%;
}

.w-70 {
    width: 70%;
}

.w-75 {
    width: 75%;
}

.w-80 {
    width: 80%;
}

.w-90 {
    width: 90%;
}

.w-100 {
    width: 100%;
}

/* Height Percentages */
.h-25 {
    height: 25%;
}

.h-50 {
    height: 50%;
}

.h-75 {
    height: 75%;
}

.h-100 {
    height: 100%;
}

/* Viewport Width */
.vw-100 {
    width: 100vw;
}

.vw-50 {
    width: 50vw;
}

/* Viewport Height */
.vh-100 {
    height: 100vh;
}

.vh-75 {
    height: 75vh;
}

.vh-50 {
    height: 50vh;
}

.vh-25 {
    height: 25vh;
}

/* Flexbox Grid System based on Percentages */
.row-p {
    display: flex;
    flex-wrap: wrap;
    margin-right: -15px;
    margin-left: -15px;
}

.col-p {
    position: relative;
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
}

/* Responsive Columns */
@media (min-width: 768px) {
    .col-md-50 {
        flex: 0 0 50%;
        max-width: 50%;
    }

    .col-md-33 {
        flex: 0 0 33.333%;
        max-width: 33.333%;
    }

    .col-md-25 {
        flex: 0 0 25%;
        max-width: 25%;
    }

    .col-md-66 {
        flex: 0 0 66.666%;
        max-width: 66.666%;
    }
}

@media (min-width: 992px) {
    .col-lg-50 {
        flex: 0 0 50%;
        max-width: 50%;
    }

    .col-lg-33 {
        flex: 0 0 33.333%;
        max-width: 33.333%;
    }

    .col-lg-25 {
        flex: 0 0 25%;
        max-width: 25%;
    }
}

/* Aspect Ratio Utilities */
.ratio-16x9 {
    aspect-ratio: 16 / 9;
}

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

.ratio-1x1 {
    aspect-ratio: 1 / 1;
}