/**
 * Spacing utilities – responsive scale
 * Desktop (1200px+): 100%
 * Laptop (992–1199px): 85%  (15% reduction)
 * Tablet (768–991px): 80%  (20% reduction)
 * Mobile (max 767px): 70%  (30% reduction)
 */

:root { --sp-scale: 1; }

@media only screen and (min-width: 992px) and (max-width: 1199px) { :root { --sp-scale: 0.85; } }
@media only screen and (min-width: 768px) and (max-width: 991px) { :root { --sp-scale: 0.8; } }
@media (max-width: 767px) { :root { --sp-scale: 0.7; } }

.mt-5 { margin-top: calc(5px * var(--sp-scale)) !important; }
.mt-10 { margin-top: calc(10px * var(--sp-scale)); }
.mt-15 { margin-top: calc(15px * var(--sp-scale)); }
.mt-20 { margin-top: calc(20px * var(--sp-scale)); }
.mt-25 { margin-top: calc(25px * var(--sp-scale)); }
.mt-30 { margin-top: calc(30px * var(--sp-scale)); }
.mt-35 { margin-top: calc(35px * var(--sp-scale)); }
.mt-40 { margin-top: calc(40px * var(--sp-scale)); }
.mt-45 { margin-top: calc(45px * var(--sp-scale)); }
.mt-50 { margin-top: calc(50px * var(--sp-scale)); }
.mt-55 { margin-top: calc(55px * var(--sp-scale)); }
.mt-60 { margin-top: calc(60px * var(--sp-scale)); }
.mt-65 { margin-top: calc(65px * var(--sp-scale)); }
.mt-70 { margin-top: calc(70px * var(--sp-scale)); }
.mt-75 { margin-top: calc(75px * var(--sp-scale)); }
.mt-80 { margin-top: calc(80px * var(--sp-scale)); }
.mt-85 { margin-top: calc(85px * var(--sp-scale)); }
.mt-90 { margin-top: calc(90px * var(--sp-scale)); }
.mt-95 { margin-top: calc(95px * var(--sp-scale)); }
.mt-100 { margin-top: calc(100px * var(--sp-scale)); }
.mt-105 { margin-top: calc(105px * var(--sp-scale)); }
.mt-110 { margin-top: calc(110px * var(--sp-scale)); }
.mt-115 { margin-top: calc(115px * var(--sp-scale)); }
.mt-120 { margin-top: calc(120px * var(--sp-scale)); }
.mt-125 { margin-top: calc(125px * var(--sp-scale)); }
.mt-130 { margin-top: calc(130px * var(--sp-scale)); }
.mt-135 { margin-top: calc(135px * var(--sp-scale)); }
.mt-140 { margin-top: calc(140px * var(--sp-scale)); }
.mt-145 { margin-top: calc(145px * var(--sp-scale)); }
.mt-150 { margin-top: calc(150px * var(--sp-scale)); }
.mt-155 { margin-top: calc(155px * var(--sp-scale)); }
.mt-160 { margin-top: calc(160px * var(--sp-scale)); }
.mt-165 { margin-top: calc(165px * var(--sp-scale)); }
.mt-170 { margin-top: calc(170px * var(--sp-scale)); }
.mt-175 { margin-top: calc(175px * var(--sp-scale)); }
.mt-180 { margin-top: calc(180px * var(--sp-scale)); }
.mt-185 { margin-top: calc(185px * var(--sp-scale)); }
.mt-190 { margin-top: calc(190px * var(--sp-scale)); }
.mt-195 { margin-top: calc(195px * var(--sp-scale)); }
.mt-200 { margin-top: calc(200px * var(--sp-scale)); }

.mb-5 { margin-bottom: calc(5px * var(--sp-scale)) !important; }
.mb-10 { margin-bottom: calc(10px * var(--sp-scale)); }
.mb-15 { margin-bottom: calc(15px * var(--sp-scale)); }
.mb-20 { margin-bottom: calc(20px * var(--sp-scale)); }
.mb-25 { margin-bottom: calc(25px * var(--sp-scale)); }
.mb-30 { margin-bottom: calc(30px * var(--sp-scale)); }
.mb-35 { margin-bottom: calc(35px * var(--sp-scale)); }
.mb-40 { margin-bottom: calc(40px * var(--sp-scale)); }
.mb-45 { margin-bottom: calc(45px * var(--sp-scale)); }
.mb-50 { margin-bottom: calc(50px * var(--sp-scale)); }
.mb-55 { margin-bottom: calc(55px * var(--sp-scale)); }
.mb-60 { margin-bottom: calc(60px * var(--sp-scale)); }
.mb-65 { margin-bottom: calc(65px * var(--sp-scale)); }
.mb-70 { margin-bottom: calc(70px * var(--sp-scale)); }
.mb-75 { margin-bottom: calc(75px * var(--sp-scale)); }
.mb-80 { margin-bottom: calc(80px * var(--sp-scale)); }
.mb-85 { margin-bottom: calc(85px * var(--sp-scale)); }
.mb-90 { margin-bottom: calc(90px * var(--sp-scale)); }
.mb-95 { margin-bottom: calc(95px * var(--sp-scale)); }
.mb-100 { margin-bottom: calc(100px * var(--sp-scale)); }
.mb-105 { margin-bottom: calc(105px * var(--sp-scale)); }
.mb-110 { margin-bottom: calc(110px * var(--sp-scale)); }
.mb-115 { margin-bottom: calc(115px * var(--sp-scale)); }
.mb-120 { margin-bottom: calc(120px * var(--sp-scale)); }
.mb-125 { margin-bottom: calc(125px * var(--sp-scale)); }
.mb-130 { margin-bottom: calc(130px * var(--sp-scale)); }
.mb-135 { margin-bottom: calc(135px * var(--sp-scale)); }
.mb-140 { margin-bottom: calc(140px * var(--sp-scale)); }
.mb-145 { margin-bottom: calc(145px * var(--sp-scale)); }
.mb-150 { margin-bottom: calc(150px * var(--sp-scale)); }
.mb-155 { margin-bottom: calc(155px * var(--sp-scale)); }
.mb-160 { margin-bottom: calc(160px * var(--sp-scale)); }
.mb-165 { margin-bottom: calc(165px * var(--sp-scale)); }
.mb-170 { margin-bottom: calc(170px * var(--sp-scale)); }
.mb-175 { margin-bottom: calc(175px * var(--sp-scale)); }
.mb-180 { margin-bottom: calc(180px * var(--sp-scale)); }
.mb-185 { margin-bottom: calc(185px * var(--sp-scale)); }
.mb-190 { margin-bottom: calc(190px * var(--sp-scale)); }
.mb-195 { margin-bottom: calc(195px * var(--sp-scale)); }
.mb-200 { margin-bottom: calc(200px * var(--sp-scale)); }

.ml-5 { margin-left: calc(5px * var(--sp-scale)); }
.ml-10 { margin-left: calc(10px * var(--sp-scale)); }
.ml-15 { margin-left: calc(15px * var(--sp-scale)); }
.ml-20 { margin-left: calc(20px * var(--sp-scale)); }
.ml-25 { margin-left: calc(25px * var(--sp-scale)); }
.ml-30 { margin-left: calc(30px * var(--sp-scale)); }
.ml-35 { margin-left: calc(35px * var(--sp-scale)); }
.ml-40 { margin-left: calc(40px * var(--sp-scale)); }
.ml-45 { margin-left: calc(45px * var(--sp-scale)); }
.ml-50 { margin-left: calc(50px * var(--sp-scale)); }
.ml-55 { margin-left: calc(55px * var(--sp-scale)); }
.ml-60 { margin-left: calc(60px * var(--sp-scale)); }
.ml-65 { margin-left: calc(65px * var(--sp-scale)); }
.ml-70 { margin-left: calc(70px * var(--sp-scale)); }
.ml-75 { margin-left: calc(75px * var(--sp-scale)); }
.ml-80 { margin-left: calc(80px * var(--sp-scale)); }
.ml-85 { margin-left: calc(85px * var(--sp-scale)); }
.ml-90 { margin-left: calc(90px * var(--sp-scale)); }
.ml-95 { margin-left: calc(95px * var(--sp-scale)); }
.ml-100 { margin-left: calc(100px * var(--sp-scale)); }
.ml-105 { margin-left: calc(105px * var(--sp-scale)); }
.ml-110 { margin-left: calc(110px * var(--sp-scale)); }
.ml-115 { margin-left: calc(115px * var(--sp-scale)); }
.ml-120 { margin-left: calc(120px * var(--sp-scale)); }
.ml-125 { margin-left: calc(125px * var(--sp-scale)); }
.ml-130 { margin-left: calc(130px * var(--sp-scale)); }
.ml-135 { margin-left: calc(135px * var(--sp-scale)); }
.ml-140 { margin-left: calc(140px * var(--sp-scale)); }
.ml-145 { margin-left: calc(145px * var(--sp-scale)); }
.ml-150 { margin-left: calc(150px * var(--sp-scale)); }
.ml-155 { margin-left: calc(155px * var(--sp-scale)); }
.ml-160 { margin-left: calc(160px * var(--sp-scale)); }
.ml-165 { margin-left: calc(165px * var(--sp-scale)); }
.ml-170 { margin-left: calc(170px * var(--sp-scale)); }
.ml-175 { margin-left: calc(175px * var(--sp-scale)); }
.ml-180 { margin-left: calc(180px * var(--sp-scale)); }
.ml-185 { margin-left: calc(185px * var(--sp-scale)); }
.ml-190 { margin-left: calc(190px * var(--sp-scale)); }
.ml-195 { margin-left: calc(195px * var(--sp-scale)); }
.ml-200 { margin-left: calc(200px * var(--sp-scale)); }

.mr-5 { margin-right: calc(5px * var(--sp-scale)); }
.mr-10 { margin-right: calc(10px * var(--sp-scale)); }
.mr-15 { margin-right: calc(15px * var(--sp-scale)); }
.mr-20 { margin-right: calc(20px * var(--sp-scale)); }
.mr-25 { margin-right: calc(25px * var(--sp-scale)); }
.mr-30 { margin-right: calc(30px * var(--sp-scale)); }
.mr-35 { margin-right: calc(35px * var(--sp-scale)); }
.mr-40 { margin-right: calc(40px * var(--sp-scale)); }
.mr-45 { margin-right: calc(45px * var(--sp-scale)); }
.mr-50 { margin-right: calc(50px * var(--sp-scale)); }
.mr-55 { margin-right: calc(55px * var(--sp-scale)); }
.mr-60 { margin-right: calc(60px * var(--sp-scale)); }
.mr-65 { margin-right: calc(65px * var(--sp-scale)); }
.mr-70 { margin-right: calc(70px * var(--sp-scale)); }
.mr-75 { margin-right: calc(75px * var(--sp-scale)); }
.mr-80 { margin-right: calc(80px * var(--sp-scale)); }
.mr-85 { margin-right: calc(85px * var(--sp-scale)); }
.mr-90 { margin-right: calc(90px * var(--sp-scale)); }
.mr-95 { margin-right: calc(95px * var(--sp-scale)); }
.mr-100 { margin-right: calc(100px * var(--sp-scale)); }
.mr-105 { margin-right: calc(105px * var(--sp-scale)); }
.mr-110 { margin-right: calc(110px * var(--sp-scale)); }
.mr-115 { margin-right: calc(115px * var(--sp-scale)); }
.mr-120 { margin-right: calc(120px * var(--sp-scale)); }
.mr-125 { margin-right: calc(125px * var(--sp-scale)); }
.mr-130 { margin-right: calc(130px * var(--sp-scale)); }
.mr-135 { margin-right: calc(135px * var(--sp-scale)); }
.mr-140 { margin-right: calc(140px * var(--sp-scale)); }
.mr-145 { margin-right: calc(145px * var(--sp-scale)); }
.mr-150 { margin-right: calc(150px * var(--sp-scale)); }
.mr-155 { margin-right: calc(155px * var(--sp-scale)); }
.mr-160 { margin-right: calc(160px * var(--sp-scale)); }
.mr-165 { margin-right: calc(165px * var(--sp-scale)); }
.mr-170 { margin-right: calc(170px * var(--sp-scale)); }
.mr-175 { margin-right: calc(175px * var(--sp-scale)); }
.mr-180 { margin-right: calc(180px * var(--sp-scale)); }
.mr-185 { margin-right: calc(185px * var(--sp-scale)); }
.mr-190 { margin-right: calc(190px * var(--sp-scale)); }
.mr-195 { margin-right: calc(195px * var(--sp-scale)); }
.mr-200 { margin-right: calc(200px * var(--sp-scale)); }

.pt-5 { padding-top: calc(5px * var(--sp-scale)) !important; }
.pt-10 { padding-top: calc(10px * var(--sp-scale)); }
.pt-15 { padding-top: calc(15px * var(--sp-scale)); }
.pt-20 { padding-top: calc(20px * var(--sp-scale)); }
.pt-25 { padding-top: calc(25px * var(--sp-scale)); }
.pt-30 { padding-top: calc(30px * var(--sp-scale)); }
.pt-35 { padding-top: calc(35px * var(--sp-scale)); }
.pt-40 { padding-top: calc(40px * var(--sp-scale)); }
.pt-45 { padding-top: calc(45px * var(--sp-scale)); }
.pt-50 { padding-top: calc(50px * var(--sp-scale)); }
.pt-55 { padding-top: calc(55px * var(--sp-scale)); }
.pt-60 { padding-top: calc(60px * var(--sp-scale)); }
.pt-65 { padding-top: calc(65px * var(--sp-scale)); }
.pt-70 { padding-top: calc(70px * var(--sp-scale)); }
.pt-75 { padding-top: calc(75px * var(--sp-scale)); }
.pt-80 { padding-top: calc(80px * var(--sp-scale)); }
.pt-85 { padding-top: calc(85px * var(--sp-scale)); }
.pt-90 { padding-top: calc(90px * var(--sp-scale)); }
.pt-95 { padding-top: calc(95px * var(--sp-scale)); }
.pt-100 { padding-top: calc(100px * var(--sp-scale)); }
.pt-105 { padding-top: calc(105px * var(--sp-scale)); }
.pt-110 { padding-top: calc(110px * var(--sp-scale)); }
.pt-115 { padding-top: calc(115px * var(--sp-scale)); }
.pt-120 { padding-top: calc(120px * var(--sp-scale)); }
.pt-125 { padding-top: calc(125px * var(--sp-scale)); }
.pt-130 { padding-top: calc(130px * var(--sp-scale)); }
.pt-135 { padding-top: calc(135px * var(--sp-scale)); }
.pt-140 { padding-top: calc(140px * var(--sp-scale)); }
.pt-145 { padding-top: calc(145px * var(--sp-scale)); }
.pt-150 { padding-top: calc(150px * var(--sp-scale)); }
.pt-155 { padding-top: calc(155px * var(--sp-scale)); }
.pt-160 { padding-top: calc(160px * var(--sp-scale)); }
.pt-165 { padding-top: calc(165px * var(--sp-scale)); }
.pt-170 { padding-top: calc(170px * var(--sp-scale)); }
.pt-175 { padding-top: calc(175px * var(--sp-scale)); }
.pt-180 { padding-top: calc(180px * var(--sp-scale)); }
.pt-185 { padding-top: calc(185px * var(--sp-scale)); }
.pt-190 { padding-top: calc(190px * var(--sp-scale)); }
.pt-195 { padding-top: calc(195px * var(--sp-scale)); }
.pt-200 { padding-top: calc(200px * var(--sp-scale)); }

.pb-5 { padding-bottom: calc(5px * var(--sp-scale)) !important; }
.pb-10 { padding-bottom: calc(10px * var(--sp-scale)); }
.pb-15 { padding-bottom: calc(15px * var(--sp-scale)); }
.pb-20 { padding-bottom: calc(20px * var(--sp-scale)); }
.pb-25 { padding-bottom: calc(25px * var(--sp-scale)); }
.pb-30 { padding-bottom: calc(30px * var(--sp-scale)); }
.pb-35 { padding-bottom: calc(35px * var(--sp-scale)); }
.pb-40 { padding-bottom: calc(40px * var(--sp-scale)); }
.pb-45 { padding-bottom: calc(45px * var(--sp-scale)); }
.pb-50 { padding-bottom: calc(50px * var(--sp-scale)); }
.pb-55 { padding-bottom: calc(55px * var(--sp-scale)); }
.pb-60 { padding-bottom: calc(60px * var(--sp-scale)); }
.pb-65 { padding-bottom: calc(65px * var(--sp-scale)); }
.pb-70 { padding-bottom: calc(70px * var(--sp-scale)); }
.pb-75 { padding-bottom: calc(75px * var(--sp-scale)); }
.pb-80 { padding-bottom: calc(80px * var(--sp-scale)); }
.pb-85 { padding-bottom: calc(85px * var(--sp-scale)); }
.pb-90 { padding-bottom: calc(90px * var(--sp-scale)); }
.pb-95 { padding-bottom: calc(95px * var(--sp-scale)); }
.pb-100 { padding-bottom: calc(100px * var(--sp-scale)); }
.pb-105 { padding-bottom: calc(105px * var(--sp-scale)); }
.pb-110 { padding-bottom: calc(110px * var(--sp-scale)); }
.pb-115 { padding-bottom: calc(115px * var(--sp-scale)); }
.pb-120 { padding-bottom: calc(120px * var(--sp-scale)); }
.pb-125 { padding-bottom: calc(125px * var(--sp-scale)); }
.pb-130 { padding-bottom: calc(130px * var(--sp-scale)); }
.pb-135 { padding-bottom: calc(135px * var(--sp-scale)); }
.pb-140 { padding-bottom: calc(140px * var(--sp-scale)); }
.pb-145 { padding-bottom: calc(145px * var(--sp-scale)); }
.pb-150 { padding-bottom: calc(150px * var(--sp-scale)); }
.pb-155 { padding-bottom: calc(155px * var(--sp-scale)); }
.pb-160 { padding-bottom: calc(160px * var(--sp-scale)); }
.pb-165 { padding-bottom: calc(165px * var(--sp-scale)); }
.pb-170 { padding-bottom: calc(170px * var(--sp-scale)); }
.pb-175 { padding-bottom: calc(175px * var(--sp-scale)); }
.pb-180 { padding-bottom: calc(180px * var(--sp-scale)); }
.pb-185 { padding-bottom: calc(185px * var(--sp-scale)); }
.pb-190 { padding-bottom: calc(190px * var(--sp-scale)); }
.pb-195 { padding-bottom: calc(195px * var(--sp-scale)); }
.pb-200 { padding-bottom: calc(200px * var(--sp-scale)); }

.pl-5 { padding-left: calc(5px * var(--sp-scale)); }
.pl-10 { padding-left: calc(10px * var(--sp-scale)); }
.pl-15 { padding-left: calc(15px * var(--sp-scale)); }
.pl-20 { padding-left: calc(20px * var(--sp-scale)); }
.pl-25 { padding-left: calc(25px * var(--sp-scale)); }
.pl-30 { padding-left: calc(30px * var(--sp-scale)); }
.pl-35 { padding-left: calc(35px * var(--sp-scale)); }
.pl-40 { padding-left: calc(40px * var(--sp-scale)); }
.pl-45 { padding-left: calc(45px * var(--sp-scale)); }
.pl-50 { padding-left: calc(50px * var(--sp-scale)); }
.pl-55 { padding-left: calc(55px * var(--sp-scale)); }
.pl-60 { padding-left: calc(60px * var(--sp-scale)); }
.pl-65 { padding-left: calc(65px * var(--sp-scale)); }
.pl-70 { padding-left: calc(70px * var(--sp-scale)); }
.pl-75 { padding-left: calc(75px * var(--sp-scale)); }
.pl-80 { padding-left: calc(80px * var(--sp-scale)); }
.pl-85 { padding-left: calc(85px * var(--sp-scale)); }
.pl-90 { padding-left: calc(90px * var(--sp-scale)); }
.pl-95 { padding-left: calc(95px * var(--sp-scale)); }
.pl-100 { padding-left: calc(100px * var(--sp-scale)); }
.pl-105 { padding-left: calc(105px * var(--sp-scale)); }
.pl-110 { padding-left: calc(110px * var(--sp-scale)); }
.pl-115 { padding-left: calc(115px * var(--sp-scale)); }
.pl-120 { padding-left: calc(120px * var(--sp-scale)); }
.pl-125 { padding-left: calc(125px * var(--sp-scale)); }
.pl-130 { padding-left: calc(130px * var(--sp-scale)); }
.pl-135 { padding-left: calc(135px * var(--sp-scale)); }
.pl-140 { padding-left: calc(140px * var(--sp-scale)); }
.pl-145 { padding-left: calc(145px * var(--sp-scale)); }
.pl-150 { padding-left: calc(150px * var(--sp-scale)); }
.pl-155 { padding-left: calc(155px * var(--sp-scale)); }
.pl-160 { padding-left: calc(160px * var(--sp-scale)); }
.pl-165 { padding-left: calc(165px * var(--sp-scale)); }
.pl-170 { padding-left: calc(170px * var(--sp-scale)); }
.pl-175 { padding-left: calc(175px * var(--sp-scale)); }
.pl-180 { padding-left: calc(180px * var(--sp-scale)); }
.pl-185 { padding-left: calc(185px * var(--sp-scale)); }
.pl-190 { padding-left: calc(190px * var(--sp-scale)); }
.pl-195 { padding-left: calc(195px * var(--sp-scale)); }
.pl-200 { padding-left: calc(200px * var(--sp-scale)); }

.pr-5 { padding-right: calc(5px * var(--sp-scale)); }
.pr-10 { padding-right: calc(10px * var(--sp-scale)); }
.pr-15 { padding-right: calc(15px * var(--sp-scale)); }
.pr-20 { padding-right: calc(20px * var(--sp-scale)); }
.pr-25 { padding-right: calc(25px * var(--sp-scale)); }
.pr-30 { padding-right: calc(30px * var(--sp-scale)); }
.pr-35 { padding-right: calc(35px * var(--sp-scale)); }
.pr-40 { padding-right: calc(40px * var(--sp-scale)); }
.pr-45 { padding-right: calc(45px * var(--sp-scale)); }
.pr-50 { padding-right: calc(50px * var(--sp-scale)); }
.pr-55 { padding-right: calc(55px * var(--sp-scale)); }
.pr-60 { padding-right: calc(60px * var(--sp-scale)); }
.pr-65 { padding-right: calc(65px * var(--sp-scale)); }
.pr-70 { padding-right: calc(70px * var(--sp-scale)); }
.pr-75 { padding-right: calc(75px * var(--sp-scale)); }
.pr-80 { padding-right: calc(80px * var(--sp-scale)); }
.pr-85 { padding-right: calc(85px * var(--sp-scale)); }
.pr-90 { padding-right: calc(90px * var(--sp-scale)); }
.pr-95 { padding-right: calc(95px * var(--sp-scale)); }
.pr-100 { padding-right: calc(100px * var(--sp-scale)); }
.pr-105 { padding-right: calc(105px * var(--sp-scale)); }
.pr-110 { padding-right: calc(110px * var(--sp-scale)); }
.pr-115 { padding-right: calc(115px * var(--sp-scale)); }
.pr-120 { padding-right: calc(120px * var(--sp-scale)); }
.pr-125 { padding-right: calc(125px * var(--sp-scale)); }
.pr-130 { padding-right: calc(130px * var(--sp-scale)); }
.pr-135 { padding-right: calc(135px * var(--sp-scale)); }
.pr-140 { padding-right: calc(140px * var(--sp-scale)); }
.pr-145 { padding-right: calc(145px * var(--sp-scale)); }
.pr-150 { padding-right: calc(150px * var(--sp-scale)); }
.pr-155 { padding-right: calc(155px * var(--sp-scale)); }
.pr-160 { padding-right: calc(160px * var(--sp-scale)); }
.pr-165 { padding-right: calc(165px * var(--sp-scale)); }
.pr-170 { padding-right: calc(170px * var(--sp-scale)); }
.pr-175 { padding-right: calc(175px * var(--sp-scale)); }
.pr-180 { padding-right: calc(180px * var(--sp-scale)); }
.pr-185 { padding-right: calc(185px * var(--sp-scale)); }
.pr-190 { padding-right: calc(190px * var(--sp-scale)); }
.pr-195 { padding-right: calc(195px * var(--sp-scale)); }
.pr-200 { padding-right: calc(200px * var(--sp-scale)); }

.pt-250 { padding-top: calc(250px * var(--sp-scale)); }
.pt-270 { padding-top: calc(270px * var(--sp-scale)); }

/* Section spacing (reduced from 100 / 80 / 60 / 50) */
.section-pt { padding-top: 100px; }
.section-pb { padding-bottom: 100px; }
.section-mt { margin-top: 100px; }
.section-mb { margin-bottom: 100px; }

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .section-pt { padding-top: 68px; }
    .section-pb { padding-bottom: 68px; }
    .section-mt { margin-top: 68px; }
    .section-mb { margin-bottom: 68px; }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .section-pt { padding-top: 48px; }
    .section-pb { padding-bottom: 48px; }
    .section-mt { margin-top: 48px; }
    .section-mb { margin-bottom: 48px; }
}

@media (max-width: 767px) {
    .section-pt,
    .xs-pt-50 { padding-top: 35px; }
    .section-pb,
    .xs-pb-50 { padding-bottom: 35px; }
    .section-mt,
    .xs-mt-50 { margin-top: 35px; }
    .section-mb,
    .xs-mb-50 { margin-bottom: 35px; }
}

@media (max-width: 767px) {
    .xs-mt-5 { margin-top: calc(5px * var(--sp-scale)); }
    .xs-mt-10 { margin-top: calc(10px * var(--sp-scale)); }
    .xs-mt-15 { margin-top: calc(15px * var(--sp-scale)); }
    .xs-mt-20 { margin-top: calc(20px * var(--sp-scale)); }
    .xs-mt-25 { margin-top: calc(25px * var(--sp-scale)); }
    .xs-mt-30 { margin-top: calc(30px * var(--sp-scale)); }
    .xs-mt-35 { margin-top: calc(35px * var(--sp-scale)); }
    .xs-mt-40 { margin-top: calc(40px * var(--sp-scale)); }
    .xs-mt-45 { margin-top: calc(45px * var(--sp-scale)); }
    .xs-mt-50 { margin-top: calc(50px * var(--sp-scale)); }
    .xs-mb-5 { margin-bottom: calc(5px * var(--sp-scale)); }
    .xs-mb-10 { margin-bottom: calc(10px * var(--sp-scale)); }
    .xs-mb-15 { margin-bottom: calc(15px * var(--sp-scale)); }
    .xs-mb-20 { margin-bottom: calc(20px * var(--sp-scale)); }
    .xs-mb-25 { margin-bottom: calc(25px * var(--sp-scale)); }
    .xs-mb-30 { margin-bottom: calc(30px * var(--sp-scale)); }
    .xs-mb-35 { margin-bottom: calc(35px * var(--sp-scale)); }
    .xs-mb-40 { margin-bottom: calc(40px * var(--sp-scale)); }
    .xs-mb-45 { margin-bottom: calc(45px * var(--sp-scale)); }
    .xs-mb-50 { margin-bottom: calc(50px * var(--sp-scale)); }
    .xs-ml-5 { margin-left: calc(5px * var(--sp-scale)); }
    .xs-ml-10 { margin-left: calc(10px * var(--sp-scale)); }
    .xs-ml-15 { margin-left: calc(15px * var(--sp-scale)); }
    .xs-ml-20 { margin-left: calc(20px * var(--sp-scale)); }
    .xs-ml-25 { margin-left: calc(25px * var(--sp-scale)); }
    .xs-ml-30 { margin-left: calc(30px * var(--sp-scale)); }
    .xs-ml-35 { margin-left: calc(35px * var(--sp-scale)); }
    .xs-ml-40 { margin-left: calc(40px * var(--sp-scale)); }
    .xs-ml-45 { margin-left: calc(45px * var(--sp-scale)); }
    .xs-ml-50 { margin-left: calc(50px * var(--sp-scale)); }
    .xs-pt-5 { padding-top: calc(5px * var(--sp-scale)); }
    .xs-pt-10 { padding-top: calc(10px * var(--sp-scale)); }
    .xs-pt-15 { padding-top: calc(15px * var(--sp-scale)); }
    .xs-pt-20 { padding-top: calc(20px * var(--sp-scale)); }
    .xs-pt-25 { padding-top: calc(25px * var(--sp-scale)); }
    .xs-pt-30 { padding-top: calc(30px * var(--sp-scale)); }
    .xs-pt-35 { padding-top: calc(35px * var(--sp-scale)); }
    .xs-pt-40 { padding-top: calc(40px * var(--sp-scale)); }
    .xs-pt-45 { padding-top: calc(45px * var(--sp-scale)); }
    .xs-pt-50 { padding-top: calc(50px * var(--sp-scale)); }
    .xs-pl-5 { padding-left: calc(5px * var(--sp-scale)); }
    .xs-pl-10 { padding-left: calc(10px * var(--sp-scale)); }
    .xs-pl-15 { padding-left: calc(15px * var(--sp-scale)); }
    .xs-pl-20 { padding-left: calc(20px * var(--sp-scale)); }
    .xs-pl-25 { padding-left: calc(25px * var(--sp-scale)); }
    .xs-pl-30 { padding-left: calc(30px * var(--sp-scale)); }
    .xs-pl-35 { padding-left: calc(35px * var(--sp-scale)); }
    .xs-pl-40 { padding-left: calc(40px * var(--sp-scale)); }
    .xs-pl-45 { padding-left: calc(45px * var(--sp-scale)); }
    .xs-pl-50 { padding-left: calc(50px * var(--sp-scale)); }
    .xs-pb-5 { padding-bottom: calc(5px * var(--sp-scale)); }
    .xs-pb-10 { padding-bottom: calc(10px * var(--sp-scale)); }
    .xs-pb-15 { padding-bottom: calc(15px * var(--sp-scale)); }
    .xs-pb-20 { padding-bottom: calc(20px * var(--sp-scale)); }
    .xs-pb-25 { padding-bottom: calc(25px * var(--sp-scale)); }
    .xs-pb-30 { padding-bottom: calc(30px * var(--sp-scale)); }
    .xs-pb-35 { padding-bottom: calc(35px * var(--sp-scale)); }
    .xs-pb-40 { padding-bottom: calc(40px * var(--sp-scale)); }
    .xs-pb-45 { padding-bottom: calc(45px * var(--sp-scale)); }
    .xs-pb-50 { padding-bottom: calc(50px * var(--sp-scale)); }
}