:root {
--rem-val: 16;
} :root {
--d300: 68px;
--d279: 64px;
--d223: 57px;
--d178: 51px;
--d143: 46px;
--d130: 43px;
--d124: 42px;
--d120: 41px;
--d114: 40px;
--d100: 38px;
--d96: 37px;
--d90: 36px;
--d80: 33px;
--d73: 31px;
--d60: 29px;
--d58: 28px;
--d50: 26px;
--d48: 25px;
--d46: 25px;
--d40: 23px;
--d37: 22px;
--d34: 21px;
--d30: 20px;
--d28: 19px;
--d26: 18px;
--d24: 17px;
--d20: 16px;
--d19: 15px;
--d18: 15px;
--d16: 14px;
--d15: 14px;
--d14: 13px;
--d12: 12px;
}
@media screen and (min-width: 360px) {
:root {
--d300: calc(68px + ((100vw - 360px) / (1920 - 360)) * (300 - 68) );
--d279: calc(64px + ((100vw - 360px) / (1920 - 360)) * (279 - 64) );
--d223: calc(57px + ((100vw - 360px) / (1920 - 360)) * (223 - 57) );
--d178: calc(51px + ((100vw - 360px) / (1920 - 360)) * (178 - 51) );
--d143: calc(46px + ((100vw - 360px) / (1920 - 360)) * (150 - 46) );
--d130: calc(43px + ((100vw - 360px) / (1920 - 360)) * (130 - 43) );
--d124: calc(42px + ((100vw - 360px) / (1920 - 360)) * (124 - 42) );
--d120: calc(41px + ((100vw - 360px) / (1920 - 360)) * (120 - 41) );
--d114: calc(40px + ((100vw - 360px) / (1920 - 360)) * (114 - 40) );
--d100: calc(38px + ((100vw - 360px) / (1920 - 360)) * (100 - 38) );
--d96: calc(37px + ((100vw - 360px) / (1920 - 360)) * (96 - 37) );
--d90: calc(36px + ((100vw - 360px) / (1920 - 360)) * (90 - 36) );
--d80: calc(33px + ((100vw - 360px) / (1920 - 360)) * (80 - 33) );
--d73: calc(31px + ((100vw - 360px) / (1920 - 360)) * (70 - 31) );
--d60: calc(29px + ((100vw - 360px) / (1920 - 360)) * (60 - 29) );
--d58: calc(28px + ((100vw - 360px) / (1920 - 360)) * (58 - 28) );
--d50: calc(26px + ((100vw - 360px) / (1920 - 360)) * (50 - 26) );
--d48: calc(25px + ((100vw - 360px) / (1920 - 360)) * (48 - 25) );
--d46: calc(25px + ((100vw - 360px) / (1920 - 360)) * (46 - 25) );
--d40: calc(23px + ((100vw - 360px) / (1920 - 360)) * (40 - 23) );
--d37: calc(22px + ((100vw - 360px) / (1920 - 360)) * (37 - 22) );
--d34: calc(21px + ((100vw - 360px) / (1920 - 360)) * (34 - 21) );
--d30: calc(20px + ((100vw - 360px) / (1920 - 360)) * (30 - 20) );
--d28: calc(19px + ((100vw - 360px) / (1920 - 360)) * (28 - 19) );
--d26: calc(18px + ((100vw - 360px) / (1920 - 360)) * (26 - 18) );
--d24: calc(17px + ((100vw - 360px) / (1920 - 360)) * (24 - 17) );
--d20: calc(16px + ((100vw - 360px) / (1920 - 360)) * (20 - 16) );
--d19: calc(15px + ((100vw - 360px) / (1920 - 360)) * (18 - 15) );
--d18: calc(15px + ((100vw - 360px) / (1920 - 360)) * (18 - 15) );
--d16: calc(14px + ((100vw - 360px) / (1920 - 360)) * (16 - 14) );
--d15: calc(14px + ((100vw - 360px) / (1920 - 360)) * (15 - 14) );
--d14: calc(13px + ((100vw - 360px) / (1920 - 360)) * (14 - 13) );
--d12: calc(12px + ((100vw - 360px) / (1920 - 360)) * (12 - 12) );
}
}
@media screen and (min-width: 1920px) {
:root {
--d300: 300px;
--d279: 279px;
--d223: 223px;
--d178: 178px;
--d143: 150px;
--d130: 130px;
--d124: 124px;
--d120: 120px;
--d114: 114px;
--d100: 100px;
--d96: 96px;
--d90: 90px;
--d80: 80px;
--d73: 70px;
--d60: 60px;
--d58: 58px;
--d50: 50px;
--d48: 48px;
--d46: 46px;
--d40: 40px;
--d37: 37px;
--d34: 34px;
--d30: 30px;
--d28: 28px;
--d26: 26px;
--d24: 24px;
--d20: 20px;
--d19: 18px;
--d18: 18px;
--d16: 16px;
--d15: 15px;
--d14: 14px;
--d12: 12px;
}
}