/* ========================================
   TEXT SIZE UTILITY SYSTEM
   Modular Typography Classes
======================================== */

:root {
  --text-4: 4px;
  --text-7: 7px;
  --text-10: 10px;
  --text-12: 12px;
  --text-13: 13px;
  --text-14: 14px;
  --text-15: 15px;
  --text-16: 16px;
  --text-18: 18px;
  --text-20: 20px;
  --text-22: 22px;
  --text-24: 24px;
  --text-25: 25px;
  --text-26: 26px;
  --text-28: 28px;
  --text-30: 30px;
  --text-32: 32px;
  --text-36: 36px;
  --text-40: 40px;
  --text-44: 44px;
  --text-48: 48px;
  --text-50: 50px;
  --text-56: 56px;
  --text-60: 60px;
  --text-64: 64px;
  --text-72: 72px;
  --text-80: 80px;
  --text-96: 96px;
  --text-100: 100px;
}

/* Base Text Classes */
.text-4 { font-size: var(--text-4) !important; }
.text-7 { font-size: var(--text-7) !important; }
.text-10 { font-size: var(--text-10) !important; }
.text-12 { font-size: var(--text-12) !important; }
.text-13 { font-size: var(--text-13) !important; }
.text-14 { font-size: var(--text-14) !important; }
.text-15 { font-size: var(--text-15) !important; }
.text-16 { font-size: var(--text-16) !important; }
.text-18 { font-size: var(--text-18) !important; }
.text-20 { font-size: var(--text-20) !important; }
.text-22 { font-size: var(--text-22) !important; }
.text-24 { font-size: var(--text-24) !important; }
.text-25 { font-size: var(--text-25) !important; }
.text-26 { font-size: var(--text-26) !important; }
.text-28 { font-size: var(--text-28) !important; }
.text-30 { font-size: var(--text-30) !important; }
.text-32 { font-size: var(--text-32) !important; }
.text-36 { font-size: var(--text-36) !important; }
.text-40 { font-size: var(--text-40) !important; }
.text-44 { font-size: var(--text-44) !important; }
.text-48 { font-size: var(--text-48) !important; }
.text-50 { font-size: var(--text-50) !important; }
.text-56 { font-size: var(--text-56) !important; }
.text-60 { font-size: var(--text-60) !important; }
.text-64 { font-size: var(--text-64) !important; }
.text-72 { font-size: var(--text-72) !important; }
.text-80 { font-size: var(--text-80) !important; }
.text-96 { font-size: var(--text-96) !important; }
.text-100 { font-size: var(--text-100) !important; }

/* XL Breakpoint (max-width: 1199px) */
@media (max-width: 1199px) {
  .xl\:text-4 { font-size: var(--text-4) !important; }
  .xl\:text-7 { font-size: var(--text-7) !important; }
  .xl\:text-10 { font-size: var(--text-10) !important; }
  .xl\:text-12 { font-size: var(--text-12) !important; }
  .xl\:text-13 { font-size: var(--text-13) !important; }
  .xl\:text-14 { font-size: var(--text-14) !important; }
  .xl\:text-15 { font-size: var(--text-15) !important; }
  .xl\:text-16 { font-size: var(--text-16) !important; }
  .xl\:text-18 { font-size: var(--text-18) !important; }
  .xl\:text-20 { font-size: var(--text-20) !important; }
  .xl\:text-22 { font-size: var(--text-22) !important; }
  .xl\:text-24 { font-size: var(--text-24) !important; }
  .xl\:text-25 { font-size: var(--text-25) !important; }
  .xl\:text-26 { font-size: var(--text-26) !important; }
  .xl\:text-28 { font-size: var(--text-28) !important; }
  .xl\:text-30 { font-size: var(--text-30) !important; }
  .xl\:text-32 { font-size: var(--text-32) !important; }
  .xl\:text-36 { font-size: var(--text-36) !important; }
  .xl\:text-40 { font-size: var(--text-40) !important; }
  .xl\:text-44 { font-size: var(--text-44) !important; }
  .xl\:text-48 { font-size: var(--text-48) !important; }
  .xl\:text-50 { font-size: var(--text-50) !important; }
  .xl\:text-56 { font-size: var(--text-56) !important; }
  .xl\:text-60 { font-size: var(--text-60) !important; }
  .xl\:text-64 { font-size: var(--text-64) !important; }
  .xl\:text-72 { font-size: var(--text-72) !important; }
  .xl\:text-80 { font-size: var(--text-80) !important; }
  .xl\:text-96 { font-size: var(--text-96) !important; }
  .xl\:text-100 { font-size: var(--text-100) !important; }
}

/* LG Breakpoint (max-width: 991px) */
@media (max-width: 991px) {
  .lg\:text-4 { font-size: var(--text-4) !important; }
  .lg\:text-7 { font-size: var(--text-7) !important; }
  .lg\:text-10 { font-size: var(--text-10) !important; }
  .lg\:text-12 { font-size: var(--text-12) !important; }
  .lg\:text-13 { font-size: var(--text-13) !important; }
  .lg\:text-14 { font-size: var(--text-14) !important; }
  .lg\:text-15 { font-size: var(--text-15) !important; }
  .lg\:text-16 { font-size: var(--text-16) !important; }
  .lg\:text-18 { font-size: var(--text-18) !important; }
  .lg\:text-20 { font-size: var(--text-20) !important; }
  .lg\:text-22 { font-size: var(--text-22) !important; }
  .lg\:text-24 { font-size: var(--text-24) !important; }
  .lg\:text-25 { font-size: var(--text-25) !important; }
  .lg\:text-26 { font-size: var(--text-26) !important; }
  .lg\:text-28 { font-size: var(--text-28) !important; }
  .lg\:text-30 { font-size: var(--text-30) !important; }
  .lg\:text-32 { font-size: var(--text-32) !important; }
  .lg\:text-36 { font-size: var(--text-36) !important; }
  .lg\:text-40 { font-size: var(--text-40) !important; }
  .lg\:text-44 { font-size: var(--text-44) !important; }
  .lg\:text-48 { font-size: var(--text-48) !important; }
  .lg\:text-50 { font-size: var(--text-50) !important; }
  .lg\:text-56 { font-size: var(--text-56) !important; }
  .lg\:text-60 { font-size: var(--text-60) !important; }
  .lg\:text-64 { font-size: var(--text-64) !important; }
  .lg\:text-72 { font-size: var(--text-72) !important; }
  .lg\:text-80 { font-size: var(--text-80) !important; }
  .lg\:text-96 { font-size: var(--text-96) !important; }
  .lg\:text-100 { font-size: var(--text-100) !important; }
}

/* MD Breakpoint (max-width: 767px) */
@media (max-width: 767px) {
  .md\:text-4 { font-size: var(--text-4) !important; }
  .md\:text-7 { font-size: var(--text-7) !important; }
  .md\:text-10 { font-size: var(--text-10) !important; }
  .md\:text-12 { font-size: var(--text-12) !important; }
  .md\:text-13 { font-size: var(--text-13) !important; }
  .md\:text-14 { font-size: var(--text-14) !important; }
  .md\:text-15 { font-size: var(--text-15) !important; }
  .md\:text-16 { font-size: var(--text-16) !important; }
  .md\:text-18 { font-size: var(--text-18) !important; }
  .md\:text-20 { font-size: var(--text-20) !important; }
  .md\:text-22 { font-size: var(--text-22) !important; }
  .md\:text-24 { font-size: var(--text-24) !important; }
  .md\:text-25 { font-size: var(--text-25) !important; }
  .md\:text-26 { font-size: var(--text-26) !important; }
  .md\:text-28 { font-size: var(--text-28) !important; }
  .md\:text-30 { font-size: var(--text-30) !important; }
  .md\:text-32 { font-size: var(--text-32) !important; }
  .md\:text-36 { font-size: var(--text-36) !important; }
  .md\:text-40 { font-size: var(--text-40) !important; }
  .md\:text-44 { font-size: var(--text-44) !important; }
  .md\:text-48 { font-size: var(--text-48) !important; }
  .md\:text-50 { font-size: var(--text-50) !important; }
  .md\:text-56 { font-size: var(--text-56) !important; }
  .md\:text-60 { font-size: var(--text-60) !important; }
  .md\:text-64 { font-size: var(--text-64) !important; }
  .md\:text-72 { font-size: var(--text-72) !important; }
  .md\:text-80 { font-size: var(--text-80) !important; }
  .md\:text-96 { font-size: var(--text-96) !important; }
  .md\:text-100 { font-size: var(--text-100) !important; }
}

/* SM Breakpoint (max-width: 575px) */
@media (max-width: 575px) {
  .sm\:text-4 { font-size: var(--text-4) !important; }
  .sm\:text-7 { font-size: var(--text-7) !important; }
  .sm\:text-10 { font-size: var(--text-10) !important; }
  .sm\:text-12 { font-size: var(--text-12) !important; }
  .sm\:text-13 { font-size: var(--text-13) !important; }
  .sm\:text-14 { font-size: var(--text-14) !important; }
  .sm\:text-15 { font-size: var(--text-15) !important; }
  .sm\:text-16 { font-size: var(--text-16) !important; }
  .sm\:text-18 { font-size: var(--text-18) !important; }
  .sm\:text-20 { font-size: var(--text-20) !important; }
  .sm\:text-22 { font-size: var(--text-22) !important; }
  .sm\:text-24 { font-size: var(--text-24) !important; }
  .sm\:text-25 { font-size: var(--text-25) !important; }
  .sm\:text-26 { font-size: var(--text-26) !important; }
  .sm\:text-28 { font-size: var(--text-28) !important; }
  .sm\:text-30 { font-size: var(--text-30) !important; }
  .sm\:text-32 { font-size: var(--text-32) !important; }
  .sm\:text-36 { font-size: var(--text-36) !important; }
  .sm\:text-40 { font-size: var(--text-40) !important; }
  .sm\:text-44 { font-size: var(--text-44) !important; }
  .sm\:text-48 { font-size: var(--text-48) !important; }
  .sm\:text-50 { font-size: var(--text-50) !important; }
  .sm\:text-56 { font-size: var(--text-56) !important; }
  .sm\:text-60 { font-size: var(--text-60) !important; }
  .sm\:text-64 { font-size: var(--text-64) !important; }
  .sm\:text-72 { font-size: var(--text-72) !important; }
  .sm\:text-80 { font-size: var(--text-80) !important; }
  .sm\:text-96 { font-size: var(--text-96) !important; }
  .sm\:text-100 { font-size: var(--text-100) !important; }
}

/* XS Breakpoint (max-width: 479px) */
@media (max-width: 479px) {
  .xs\:text-4 { font-size: var(--text-4) !important; }
  .xs\:text-7 { font-size: var(--text-7) !important; }
  .xs\:text-10 { font-size: var(--text-10) !important; }
  .xs\:text-12 { font-size: var(--text-12) !important; }
  .xs\:text-13 { font-size: var(--text-13) !important; }
  .xs\:text-14 { font-size: var(--text-14) !important; }
  .xs\:text-15 { font-size: var(--text-15) !important; }
  .xs\:text-16 { font-size: var(--text-16) !important; }
  .xs\:text-18 { font-size: var(--text-18) !important; }
  .xs\:text-20 { font-size: var(--text-20) !important; }
  .xs\:text-22 { font-size: var(--text-22) !important; }
  .xs\:text-24 { font-size: var(--text-24) !important; }
  .xs\:text-25 { font-size: var(--text-25) !important; }
  .xs\:text-26 { font-size: var(--text-26) !important; }
  .xs\:text-28 { font-size: var(--text-28) !important; }
  .xs\:text-30 { font-size: var(--text-30) !important; }
  .xs\:text-32 { font-size: var(--text-32) !important; }
  .xs\:text-36 { font-size: var(--text-36) !important; }
  .xs\:text-40 { font-size: var(--text-40) !important; }
  .xs\:text-44 { font-size: var(--text-44) !important; }
  .xs\:text-48 { font-size: var(--text-48) !important; }
  .xs\:text-50 { font-size: var(--text-50) !important; }
  .xs\:text-56 { font-size: var(--text-56) !important; }
  .xs\:text-60 { font-size: var(--text-60) !important; }
  .xs\:text-64 { font-size: var(--text-64) !important; }
  .xs\:text-72 { font-size: var(--text-72) !important; }
  .xs\:text-80 { font-size: var(--text-80) !important; }
  .xs\:text-96 { font-size: var(--text-96) !important; }
  .xs\:text-100 { font-size: var(--text-100) !important; }
}

.lh-1 {
  line-height: 1 !important;
}

.lh-11 {
  line-height: 1.1 !important;
}

.lh-12 {
  line-height: 1.2 !important;
}

.lh-13 {
  line-height: 1.3 !important;
}

.lh-14 {
  line-height: 1.4 !important;
}

.lh-15 {
  line-height: 1.5 !important;
}

.lh-16 {
  line-height: 1.6 !important;
}

.lh-17 {
  line-height: 1.7 !important;
}

.lh-18 {
  line-height: 1.8 !important;
}

.lh-19 {
  line-height: 1.9 !important;
}

.lh-2 {
  line-height: 2 !important;
}
.fw-300 {
  font-weight: 300;
}

.fw-400 {
  font-weight: 400;
}

.fw-500 {
  font-weight: 500;
}

.fw-600 {
  font-weight: 600;
}

.fw-700 {
  font-weight: 700;
}
.imgscale {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: 10px;
}
.imgscale::before {
  display: block;
  width: 100%;
  content: "";
}

.imgscale-1\:1::before {
  padding-bottom: 100%;
}

.imgscale-2\:1::before {
  padding-bottom: 50%;
}

.imgscale-3\:2::before {
  padding-bottom: 66.66667%;
}

.imgscale-3\:4::before {
  padding-bottom: 133.33333%;
}

.imgscale-4\:3::before {
  padding-bottom: 75%;
}

.imgscale-4\:1::before {
  padding-bottom: 25%;
}
.imgscale-4\:1\:1::before {
  padding-bottom: 35%;
}
.imgscale-5\:4::before {
  padding-bottom: 80%;
}
.imgscale-5\:5\:4::before {
  padding-bottom: 92%;
}
.imgscale-8\:5::before {
  padding-bottom: 62.5%;
}

.imgscale-15\:9::before {
  padding-bottom: 60%;
}

.imgscale-16\:9::before {
  padding-bottom: 56.25%;
}
.imgscale-16\:9-1::before {
  padding-bottom: 46.25%;
}
.imgscale-19\:21::before {
  padding-bottom: 110.52632%;
}

.imgscale-28\:20::before {
  padding-bottom: 71.42857%;
}

.imgscale-23\:26::before {
  padding-bottom: 113.04348%;
}

.imgscale-19\:22::before {
  padding-bottom: 115.78947%;
}

.imgscale-23\:30::before {
  padding-bottom: 130.43478%;
}
.imgscale-23\:32::before {
  padding-bottom: 150%;
}
.imgscale-41\:30::before {
  padding-bottom: 73.17073%;
}

.imgscale-41\:45::before {
  padding-bottom: 109.7561%;
}

/* ================================================== */
/* IMAGE COVER HELPERS */
/* ================================================== */

.bg-image {
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  width: 100%;
  height: 100%;
}

.img-object-cover {
  -o-object-fit: cover;
     object-fit: cover;
}

.img-cover {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.pic-scale {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}