From bd8790272c7752d34748f9829c8273932575c768 Mon Sep 17 00:00:00 2001
From: Ryan Dee <ryan@skoolbus39.com>
Date: Tue, 23 Jun 2026 10:29:06 -0500
Subject: [PATCH] Add mixins/utilities for viewport lengths

---
 scss/mixins/_height-width.scss    | 6 ++++++
 scss/utilities/_height-width.scss | 6 ++++++
 2 files changed, 12 insertions(+)

diff --git a/scss/mixins/_height-width.scss b/scss/mixins/_height-width.scss
index c9e06bc4..dc718a4f 100644
--- a/scss/mixins/_height-width.scss
+++ b/scss/mixins/_height-width.scss
@@ -25,6 +25,9 @@
 @mixin h-50pc($imp:null) { height: 50% $imp; }
 @mixin h-75pc($imp:null) { height: 75% $imp; }
 @mixin h-100pc($imp:null) { height: 100% $imp; }
+@mixin h-25vh($imp:null) { height: 25vh $imp; }
+@mixin h-50vh($imp:null) { height: 50vh $imp; }
+@mixin h-75vh($imp:null) { height: 75vh $imp; }
 @mixin h-100vh($imp:null) { height: 100vh $imp; }
 @mixin h-fit-content($imp:null) { height: fit-content $imp; }
 @mixin h-max-content($imp:null) { height: max-content $imp; }
@@ -62,6 +65,9 @@
 @mixin w-50pc($imp:null) { width: 50% $imp; }
 @mixin w-75pc($imp:null) { width: 75% $imp; }
 @mixin w-100pc($imp:null) { width: 100% $imp; }
+@mixin h-25vw($imp:null) { height: 25vw $imp; }
+@mixin h-50vw($imp:null) { height: 50vw $imp; }
+@mixin h-75vw($imp:null) { height: 75vw $imp; }
 @mixin w-100vw($imp:null) { width: 100vw $imp; }
 @mixin w-fit-content($imp:null) { width: fit-content $imp; }
 @mixin w-max-content($imp:null) { width: max-content $imp; }
diff --git a/scss/utilities/_height-width.scss b/scss/utilities/_height-width.scss
index 9a4f31e0..4792219d 100644
--- a/scss/utilities/_height-width.scss
+++ b/scss/utilities/_height-width.scss
@@ -25,6 +25,9 @@
 .dcf-h-50\% { @include mixins.h-50pc; }    // .dcf-h-50%
 .dcf-h-75\% { @include mixins.h-75pc; }    // .dcf-h-75%
 .dcf-h-100\% { @include mixins.h-100pc; }  // .dcf-h-100%
+.dcf-h-25vh { @include mixins.h-25vh; }
+.dcf-h-50vh { @include mixins.h-50vh; }
+.dcf-h-75vh { @include mixins.h-75vh; }
 .dcf-h-100vh { @include mixins.h-100vh; }
 .dcf-h-fit-content { @include mixins.h-fit-content; }
 .dcf-h-max-content { @include mixins.h-max-content; }
@@ -62,6 +65,9 @@
 .dcf-w-50\% { @include mixins.w-50pc; }    // .dcf-w-50%
 .dcf-w-75\% { @include mixins.w-75pc; }    // .dcf-w-75%
 .dcf-w-100\% { @include mixins.w-100pc; }  // .dcf-w-100%
+.dcf-h-25vw { @include mixins.h-25vw; }
+.dcf-h-50vw { @include mixins.h-50vw; }
+.dcf-h-75vw { @include mixins.h-75vw; }
 .dcf-w-100vw { @include mixins.w-100vw; }
 .dcf-w-fit-content { @include mixins.w-fit-content; }
 .dcf-w-max-content { @include mixins.w-max-content; }