/* ========================================= 1. STRUCTURAL CSS (Selectors apply variables dynamically) ========================================= */ /* --- Grid Widths & Flex --- */ .jacquard.mcnboxes { flex: 0 0 auto; margin-top: 5px !important; } .grid-1.jacquard.mcnboxes { width: 100% !important; } .grid-2.jacquard.mcnboxes { width: 50% !important; } .grid-3.jacquard.mcnboxes { width: 33.33% !important; } .grid-4-2.jacquard.mcnboxes { width: 25% !important; } .grid-4-3.jacquard.mcnboxes { width: 25% !important; } .grid-5-3.jacquard.mcnboxes { width: 20% !important; } /* --- Element Styling using Variables --- */ /* Body Height */ .jacquard.mcnboxes .mcnbody { height: var(--j-mcnboxes-mcnbody); } /* Header */ .jacquard .mcnhead h4 { font-size: var(--j-mcnhead-h4-size); line-height: var(--j-mcnhead-h4-line); } .jacquard .mcnhead img { width: var(--j-mcnhead-img-width); height: var(--j-mcnhead-img-height); } /* Icon Numbers (H5 & H6) */ .jacquard .mcniconnum h5 { font-size: var(--j-mcniconnum-h5-size); line-height: var(--j-mcniconnum-h5-line); } .jacquard .mcniconnum h5 img { width: var(--j-mcniconnum-h5-img-width); height: var(--j-mcniconnum-h5-img-height); } .jacquard .mcniconnum h6 { font-size: var(--j-mcniconnum-h6-size); line-height: var(--j-mcniconnum-h6-line); } /* User */ .jacquard .mcnuser h5 { font-size: var(--j-mcnuser-h5-size); line-height: var(--j-mcnuser-h5-line); } /* Progress Chart */ .jacquard .timechart .progress { height: var(--j-timechart-progress-hight); } .jacquard .timechart .progress .progress-bar { font-size: var(--j-timechart-progress-font); } /* Run/Stop Status */ .jacquard .mcnrunstop h4 { font-size: var(--j-mcnrunstop-h4-size); line-height: var(--j-mcnrunstop-h4-line); margin-bottom: 3px; } /* .jacquard .mcnrunstop h4:last-child { margin-bottom: 3px; } */ .jacquard .mcnrunstop h4 span { font-size: var(--j-mcnrunstop-h4-span-size); line-height: var(--j-mcnrunstop-h4-span-line); } .jacquard .mcnrunstop h4 img { width: var(--j-mcnrunstop-h4-img-width); height: var(--j-mcnrunstop-h4-img-height); } /* Table Headers & Cells */ [class*="grid-"].jacquard .stprsninner .table .thbox img { width: var(--j-table-thbox-img-width); height: var(--j-table-thbox-img-height); } [class*="grid-"].jacquard .stprsninner .table .thbox h6 { font-size: var(--j-table-thbox-h6-size); line-height: var(--j-table-thbox-h6-line); } [class*="grid-"].jacquard .stprsninner .table tbody tr td { font-size: var(--j-table-tbody-td-size); line-height: var(--j-table-tbody-td-line); } [class*="grid-"].jacquard .stprsninner .table tbody tr td h6 { font-size: var(--j-table-tbody-td-h6-size); line-height: var(--j-table-tbody-td-h6-line); } [class*="grid-"].jacquard .stprsninner .table tbody tr td h5 { font-size: var(--j-table-tbody-td-h5-size); } /* Expiry Message */ .jacquard.mcnboxes .mcnbody .expiryMsgDiv .expiryMsg { font-size: var(--j-expiry-msg-font-size); } [class*="grid-"].jacquard .service-due .btn{ font-size: var(--j-btn-font-size); line-height: 100%; /* Constant across all grids */ } /* ========================================= 2. VARIABLE CONFIGURATION ========================================= */ /* --- 2560px --- */ @media (max-width: 2560.98px) { .grid-1.jacquard { --j-mcnboxes-mcnbody: calc(100vh - 240px); --j-mcnhead-h4-size: 115px; --j-mcnhead-h4-line: 115px; --j-mcnhead-img-width: 105px; --j-mcnhead-img-height: 105px; --j-mcniconnum-h5-img-width: 124px; --j-mcniconnum-h5-img-height: 124px; --j-mcniconnum-h5-size: 95px; --j-mcniconnum-h5-line: 95px; --j-mcniconnum-h6-size: 95px; --j-mcniconnum-h6-line: 95px; --j-mcnuser-h5-size: 95px; --j-mcnuser-h5-line: 95px; --j-timechart-progress-hight: 95px; --j-timechart-progress-font: 40px; --j-mcnrunstop-h4-img-width: 65px; --j-mcnrunstop-h4-img-height: 65px; --j-mcnrunstop-h4-size: 75px; --j-mcnrunstop-h4-line: 75px; --j-mcnrunstop-h4-span-size: 65px; --j-mcnrunstop-h4-span-line: 65px; --j-table-thbox-img-width: 76px; --j-table-thbox-img-height: 76px; --j-table-thbox-h6-size: 95px; --j-table-thbox-h6-line: 95px; --j-table-tbody-td-size: 95px; --j-table-tbody-td-line: 95px; --j-table-tbody-td-h6-size: 95px; --j-table-tbody-td-h6-line: 95px; --j-table-tbody-td-h5-size: 95px; --j-expiry-msg-font-size: 110px; --j-btn-font-size: calc(100% - 15px); } .grid-2.jacquard { --j-mcnboxes-mcnbody: calc(100vh - 58.8vh); --j-mcnhead-h4-size: 50px; --j-mcnhead-h4-line: 50px; --j-mcnhead-img-width: 40px; --j-mcnhead-img-height: 40px; --j-mcniconnum-h5-img-width: 60px; --j-mcniconnum-h5-img-height: 60px; --j-mcniconnum-h5-size: 40px; --j-mcniconnum-h5-line: 40px; --j-mcniconnum-h6-size: 40px; --j-mcniconnum-h6-line: 40px; --j-mcnuser-h5-size: 40px; --j-mcnuser-h5-line: 40px; --j-timechart-progress-hight: 50px; --j-timechart-progress-font: 22px; --j-mcnrunstop-h4-img-width: 35px; --j-mcnrunstop-h4-img-height: 35px; --j-mcnrunstop-h4-size: 45px; --j-mcnrunstop-h4-line: 45px; --j-mcnrunstop-h4-span-size: 35px; --j-mcnrunstop-h4-span-line: 35px; --j-table-thbox-img-width: 35px; --j-table-thbox-img-height: 35px; --j-table-thbox-h6-size: 40px; --j-table-thbox-h6-line: 40px; --j-table-tbody-td-size: 40px; --j-table-tbody-td-line: 40px; --j-table-tbody-td-h6-size: 40px; --j-table-tbody-td-h6-line: 40px; --j-table-tbody-td-h5-size: 42px; --j-expiry-msg-font-size: 70px; --j-btn-font-size: calc(100% - 5px); } .grid-3.jacquard { --j-mcnboxes-mcnbody: calc(100vh - 59vh); --j-mcnhead-h4-size: 50px; --j-mcnhead-h4-line: 50px; --j-mcnhead-img-width: 40px; --j-mcnhead-img-height: 40px; --j-mcniconnum-h5-img-width: 62px; --j-mcniconnum-h5-img-height: 62px; --j-mcniconnum-h5-size: 42px; --j-mcniconnum-h5-line: 42px; --j-mcniconnum-h6-size: 42px; --j-mcniconnum-h6-line: 42px; --j-mcnuser-h5-size: 42px; --j-mcnuser-h5-line: 42px; --j-timechart-progress-hight: 50px; --j-timechart-progress-font: 22px; --j-mcnrunstop-h4-img-width: 30px; --j-mcnrunstop-h4-img-height: 30px; --j-mcnrunstop-h4-size: 40px; --j-mcnrunstop-h4-line: 40px; --j-mcnrunstop-h4-span-size: 30px; --j-mcnrunstop-h4-span-line: 30px; --j-table-thbox-img-width: 30px; --j-table-thbox-img-height: 30px; --j-table-thbox-h6-size: 35px; --j-table-thbox-h6-line: 35px; --j-table-tbody-td-size: 35px; --j-table-tbody-td-line: 35px; --j-table-tbody-td-h6-size: 35px; --j-table-tbody-td-h6-line: 35px; --j-table-tbody-td-h5-size: 37px; --j-expiry-msg-font-size: 50px; --j-btn-font-size: calc(100% - 5px); } .grid-4-2.jacquard { --j-mcnboxes-mcnbody: calc(100vh - 58vh); --j-mcnhead-h4-size: 45px; --j-mcnhead-h4-line: 45px; --j-mcnhead-img-width: 35px; --j-mcnhead-img-height: 35px; --j-mcniconnum-h5-img-width: 68px; --j-mcniconnum-h5-img-height: 68px; --j-mcniconnum-h5-size: 32px; --j-mcniconnum-h5-line: 32px; --j-mcniconnum-h6-size: 32px; --j-mcniconnum-h6-line: 32px; --j-mcnuser-h5-size: 32px; --j-mcnuser-h5-line: 32px; --j-timechart-progress-hight: 50px; --j-timechart-progress-font: 22px; --j-mcnrunstop-h4-img-width: 25px; --j-mcnrunstop-h4-img-height: 25px; --j-mcnrunstop-h4-size: 33px; --j-mcnrunstop-h4-line: 33px; --j-mcnrunstop-h4-span-size: 25px; --j-mcnrunstop-h4-span-line: 25px; --j-table-thbox-img-width: 20px; --j-table-thbox-img-height: 20px; --j-table-thbox-h6-size: 26px; --j-table-thbox-h6-line: 26px; --j-table-tbody-td-size: 26px; --j-table-tbody-td-line: 26px; --j-table-tbody-td-h6-size: 26px; --j-table-tbody-td-h6-line: 26px; --j-table-tbody-td-h5-size: 28px; --j-expiry-msg-font-size: 40px; --j-btn-font-size: calc(100% - 3px); } .grid-4-3.jacquard { --j-mcnboxes-mcnbody: calc(100vh - 72.5vh); --j-mcnhead-h4-size: 30px; --j-mcnhead-h4-line: 30px; --j-mcnhead-img-width: 25px; --j-mcnhead-img-height: 25px; --j-mcniconnum-h5-img-width: 39px; --j-mcniconnum-h5-img-height: 39px; --j-mcniconnum-h5-size: 28px; --j-mcniconnum-h5-line: 28px; --j-mcniconnum-h6-size: 28px; --j-mcniconnum-h6-line: 28px; --j-mcnuser-h5-size: 28px; --j-mcnuser-h5-line: 28px; --j-timechart-progress-hight: 35px; --j-timechart-progress-font: 16px; --j-mcnrunstop-h4-img-width: 20px; --j-mcnrunstop-h4-img-height: 20px; --j-mcnrunstop-h4-size: 25px; --j-mcnrunstop-h4-line: 25px; --j-mcnrunstop-h4-span-size: 20px; --j-mcnrunstop-h4-span-line: 20px; --j-table-thbox-img-width: 24px; --j-table-thbox-img-height: 24px; --j-table-thbox-h6-size: 24px; --j-table-thbox-h6-line: 24px; --j-table-tbody-td-size: 24px; --j-table-tbody-td-line: 24px; --j-table-tbody-td-h6-size: 24px; --j-table-tbody-td-h6-line: 24px; --j-table-tbody-td-h5-size: 26px; --j-expiry-msg-font-size: 40px; --j-btn-font-size: calc(100% - 7px); } .grid-5-3.jacquard { --j-mcnboxes-mcnbody: calc(100vh - 72.5vh); --j-mcnhead-h4-size: 30px; --j-mcnhead-h4-line: 30px; --j-mcnhead-img-width: 25px; --j-mcnhead-img-height: 25px; --j-mcniconnum-h5-img-width: 41px; --j-mcniconnum-h5-img-height: 41px; --j-mcniconnum-h5-size: 25px; --j-mcniconnum-h5-line: 25px; --j-mcniconnum-h6-size: 25px; --j-mcniconnum-h6-line: 25px; --j-mcnuser-h5-size: 25px; --j-mcnuser-h5-line: 25px; --j-timechart-progress-hight: 35px; --j-timechart-progress-font: 14px; --j-mcnrunstop-h4-img-width: 22px; --j-mcnrunstop-h4-img-height: 22px; --j-mcnrunstop-h4-size: 27px; --j-mcnrunstop-h4-line: 27px; --j-mcnrunstop-h4-span-size: 22px; --j-mcnrunstop-h4-span-line: 22px; --j-table-thbox-img-width: 15px; --j-table-thbox-img-height: 15px; --j-table-thbox-h6-size: 19px; --j-table-thbox-h6-line: 19px; --j-table-tbody-td-size: 19px; --j-table-tbody-td-line: 19px; --j-table-tbody-td-h6-size: 19px; --j-table-tbody-td-h6-line: 19px; --j-table-tbody-td-h5-size: 22px; --j-expiry-msg-font-size: 30px; --j-btn-font-size: calc(100% - 5px); } } /* --- 2160px --- */ @media (max-width: 2160.98px) { .grid-1.jacquard { --j-mcnboxes-mcnbody: calc(100vh - 225px); --j-mcnhead-h4-size: 100px; --j-mcnhead-h4-line: 100px; --j-mcnhead-img-width: 90px; --j-mcnhead-img-height: 90px; --j-mcniconnum-h5-img-width: 102px; --j-mcniconnum-h5-img-height: 102px; --j-mcniconnum-h5-size: 56px; --j-mcniconnum-h5-line: 56px; --j-mcniconnum-h6-size: 56px; --j-mcniconnum-h6-line: 56px; --j-mcnuser-h5-size: 56px; --j-mcnuser-h5-line: 56px; --j-timechart-progress-hight: 75px; --j-timechart-progress-font: 20px; --j-mcnrunstop-h4-img-width: 45px; --j-mcnrunstop-h4-img-height: 45px; --j-mcnrunstop-h4-size: 65px; --j-mcnrunstop-h4-line: 65px; --j-mcnrunstop-h4-span-size: 55px; --j-mcnrunstop-h4-span-line: 55px; --j-table-thbox-img-width: 55px; --j-table-thbox-img-height: 55px; --j-table-thbox-h6-size: 56px; --j-table-thbox-h6-line: 56px; --j-table-tbody-td-size: 56px; --j-table-tbody-td-line: 56px; --j-expiry-msg-font-size: 100px; --j-btn-font-size: calc(100% - 16px); } .grid-2.jacquard { --j-mcnboxes-mcnbody: calc(100vh - 59.5vh); --j-mcnhead-h4-size: 40px; --j-mcnhead-h4-line: 40px; --j-mcnhead-img-width: 30px; --j-mcnhead-img-height: 30px; --j-mcniconnum-h5-img-width: 41px; --j-mcniconnum-h5-img-height: 41px; --j-mcniconnum-h5-size: 36px; --j-mcniconnum-h5-line: 36px; --j-mcniconnum-h6-size: 36px; --j-mcniconnum-h6-line: 36px; --j-mcnuser-h5-size: 36px; --j-mcnuser-h5-line: 36px; --j-timechart-progress-hight: 35px; --j-timechart-progress-font: 18px; --j-mcnrunstop-h4-img-width: 25px; --j-mcnrunstop-h4-img-height: 25px; --j-mcnrunstop-h4-size: 35px; --j-mcnrunstop-h4-line: 35px; --j-mcnrunstop-h4-span-size: 25px; --j-mcnrunstop-h4-span-line: 25px; --j-table-thbox-img-width: 35px; --j-table-thbox-img-height: 35px; --j-table-thbox-h6-size: 36px; --j-table-thbox-h6-line: 36px; --j-table-tbody-td-size: 36px; --j-table-tbody-td-line: 36px; --j-expiry-msg-font-size: 60px; --j-btn-font-size: calc(100% - 6px); } .grid-3.jacquard { --j-mcnboxes-mcnbody: calc(100vh - 59.5vh); --j-mcnhead-h4-size: 40px; --j-mcnhead-h4-line: 40px; --j-mcnhead-img-width: 30px; --j-mcnhead-img-height: 30px; --j-mcniconnum-h5-img-width: 46px; --j-mcniconnum-h5-img-height: 46px; --j-mcniconnum-h5-size: 35px; --j-mcniconnum-h5-line: 35px; --j-mcniconnum-h6-size: 35px; --j-mcniconnum-h6-line: 35px; --j-mcnuser-h5-size: 35px; --j-mcnuser-h5-line: 35px; --j-timechart-progress-hight: 50px; --j-timechart-progress-font: 18px; --j-mcnrunstop-h4-img-width: 25px; --j-mcnrunstop-h4-img-height: 25px; --j-mcnrunstop-h4-size: 30px; --j-mcnrunstop-h4-line: 30px; --j-mcnrunstop-h4-span-size: 25px; --j-mcnrunstop-h4-span-line: 25px; --j-table-thbox-img-width: 25px; --j-table-thbox-img-height: 25px; --j-table-thbox-h6-size: 26px; --j-table-thbox-h6-line: 26px; --j-table-tbody-td-size: 26px; --j-table-tbody-td-line: 26px; --j-expiry-msg-font-size: 50px; --j-btn-font-size: calc(100% - 8px); } .grid-4-2.jacquard { --j-mcnboxes-mcnbody: calc(100vh - 59vh); --j-mcnhead-h4-size: 35px; --j-mcnhead-h4-line: 35px; --j-mcnhead-img-width: 25px; --j-mcnhead-img-height: 25px; --j-mcniconnum-h5-img-width: 51px; --j-mcniconnum-h5-img-height: 51px; --j-mcniconnum-h5-size: 25px; --j-mcniconnum-h5-line: 25px; --j-mcniconnum-h6-size: 25px; --j-mcniconnum-h6-line: 25px; --j-mcnuser-h5-size: 25px; --j-mcnuser-h5-line: 25px; --j-timechart-progress-hight: 35px; --j-timechart-progress-font: 14px; --j-mcnrunstop-h4-img-width: 20px; --j-mcnrunstop-h4-img-height: 20px; --j-mcnrunstop-h4-size: 25px; --j-mcnrunstop-h4-line: 25px; --j-mcnrunstop-h4-span-size: 20px; --j-mcnrunstop-h4-span-line: 20px; --j-table-thbox-img-width: 20px; --j-table-thbox-img-height: 20px; --j-table-thbox-h6-size: 21px; --j-table-thbox-h6-line: 21px; --j-table-tbody-td-size: 21px; --j-table-tbody-td-line: 21px; --j-expiry-msg-font-size: 40px; --j-btn-font-size: calc(100% - 7px); } .grid-4-3.jacquard { --j-mcnboxes-mcnbody: calc(100vh - 73.5vh); --j-mcnhead-h4-size: 25px; --j-mcnhead-h4-line: 25px; --j-mcnhead-img-width: 20px; --j-mcnhead-img-height: 20px; --j-mcniconnum-h5-img-width: 25px; --j-mcniconnum-h5-img-height: 25px; --j-mcniconnum-h5-size: 20px; --j-mcniconnum-h5-line: 20px; --j-mcniconnum-h6-size: 20px; --j-mcniconnum-h6-line: 20px; --j-mcnuser-h5-size: 20px; --j-mcnuser-h5-line: 20px; --j-timechart-progress-hight: 20px; --j-timechart-progress-font: 14px; --j-mcnrunstop-h4-img-width: 18px; --j-mcnrunstop-h4-img-height: 18px; --j-mcnrunstop-h4-size: 20px; --j-mcnrunstop-h4-line: 20px; --j-mcnrunstop-h4-span-size: 18px; --j-mcnrunstop-h4-span-line: 18px; --j-table-thbox-img-width: 20px; --j-table-thbox-img-height: 20px; --j-table-thbox-h6-size: 20px; --j-table-thbox-h6-line: 20px; --j-table-tbody-td-size: 20px; --j-table-tbody-td-line: 20px; --j-expiry-msg-font-size: 30px; --j-btn-font-size: calc(100% - 7px); } .grid-5-3.jacquard { --j-mcnboxes-mcnbody: calc(100vh - 73.5vh); --j-mcnhead-h4-size: 25px; --j-mcnhead-h4-line: 25px; --j-mcnhead-img-width: 20px; --j-mcnhead-img-height: 20px; --j-mcniconnum-h5-img-width: 28px; --j-mcniconnum-h5-img-height: 28px; --j-mcniconnum-h5-size: 20px; --j-mcniconnum-h5-line: 20px; --j-mcniconnum-h6-size: 20px; --j-mcniconnum-h6-line: 20px; --j-mcnuser-h5-size: 20px; --j-mcnuser-h5-line: 20px; --j-timechart-progress-hight: 35px; --j-timechart-progress-font: 14px; --j-mcnrunstop-h4-img-width: 18px; --j-mcnrunstop-h4-img-height: 18px; --j-mcnrunstop-h4-size: 20px; --j-mcnrunstop-h4-line: 20px; --j-mcnrunstop-h4-span-size: 18px; --j-mcnrunstop-h4-span-line: 18px; --j-table-thbox-img-width: 15px; --j-table-thbox-img-height: 15px; --j-table-thbox-h6-size: 16px; --j-table-thbox-h6-line: 16px; --j-table-tbody-td-size: 16px; --j-table-tbody-td-line: 16px; --j-expiry-msg-font-size: 30px; --j-btn-font-size: calc(100% - 5px); } } /* --- 1920px --- */ @media (max-width: 1920.98px) { .grid-1.jacquard { --j-mcnboxes-mcnbody: calc(100vh - 216px); --j-mcnhead-h4-size: 100px; --j-mcnhead-h4-line: 100px; --j-mcnhead-img-width: 80px; --j-mcnhead-img-height: 80px; --j-mcniconnum-h5-img-width: 90px; --j-mcniconnum-h5-img-height: 90px; --j-mcniconnum-h5-size: 75px; --j-mcniconnum-h5-line: 75px; --j-mcniconnum-h6-size: 75px; --j-mcniconnum-h6-line: 75px; --j-mcnuser-h5-size: 75px; --j-mcnuser-h5-line: 75px; --j-timechart-progress-hight: 75px; --j-timechart-progress-font: 25px; --j-mcnrunstop-h4-img-width: 45px; --j-mcnrunstop-h4-img-height: 45px; --j-mcnrunstop-h4-size: 65px; --j-mcnrunstop-h4-line: 65px; --j-mcnrunstop-h4-span-size: 55px; --j-mcnrunstop-h4-span-line: 55px; --j-table-thbox-img-width: 55px; --j-table-thbox-img-height: 55px; --j-table-thbox-h6-size: 61px; --j-table-thbox-h6-line: 61px; --j-table-tbody-td-size: 61px; --j-table-tbody-td-line: 61px; --j-table-tbody-td-h6-size: 61px; --j-table-tbody-td-h6-line: 61px; --j-table-tbody-td-h5-size: 61px; --j-expiry-msg-font-size: 100px; --j-btn-font-size: calc(100% - 21px); } .grid-2.jacquard { --j-mcnboxes-mcnbody: calc(100vh - 60vh); --j-mcnhead-h4-size: 40px; --j-mcnhead-h4-line: 40px; --j-mcnhead-img-width: 30px; --j-mcnhead-img-height: 30px; --j-mcniconnum-h5-img-width: 42px; --j-mcniconnum-h5-img-height: 42px; --j-mcniconnum-h5-size: 30px; --j-mcniconnum-h5-line: 30px; --j-mcniconnum-h6-size: 30px; --j-mcniconnum-h6-line: 30px; --j-mcnuser-h5-size: 30px; --j-mcnuser-h5-line: 30px; --j-timechart-progress-hight: 35px; --j-timechart-progress-font: 18px; --j-mcnrunstop-h4-img-width: 25px; --j-mcnrunstop-h4-img-height: 25px; --j-mcnrunstop-h4-size: 30px; --j-mcnrunstop-h4-line: 30px; --j-mcnrunstop-h4-span-size: 25px; --j-mcnrunstop-h4-span-line: 25px; --j-table-thbox-img-width: 30px; --j-table-thbox-img-height: 30px; --j-table-thbox-h6-size: 30px; --j-table-thbox-h6-line: 30px; --j-table-tbody-td-size: 30px; --j-table-tbody-td-line: 30px; --j-table-tbody-td-h6-size: 30px; --j-table-tbody-td-h6-line: 30px; --j-table-tbody-td-h5-size: 30px; --j-expiry-msg-font-size: 50px; --j-btn-font-size: calc(100% - 5px); } .grid-3.jacquard { --j-mcnboxes-mcnbody: calc(100vh - 60.2vh); --j-mcnhead-h4-size: 40px; --j-mcnhead-h4-line: 40px; --j-mcnhead-img-width: 30px; --j-mcnhead-img-height: 30px; --j-mcniconnum-h5-img-width: 44px; --j-mcniconnum-h5-img-height: 44px; --j-mcniconnum-h5-size: 30px; --j-mcniconnum-h5-line: 30px; --j-mcniconnum-h6-size: 30px; --j-mcniconnum-h6-line: 30px; --j-mcnuser-h5-size: 30px; --j-mcnuser-h5-line: 30px; --j-timechart-progress-hight: 45px; --j-timechart-progress-font: 18px; --j-mcnrunstop-h4-img-width: 25px; --j-mcnrunstop-h4-img-height: 25px; --j-mcnrunstop-h4-size: 30px; --j-mcnrunstop-h4-line: 30px; --j-mcnrunstop-h4-span-size: 25px; --j-mcnrunstop-h4-span-line: 25px; --j-table-thbox-img-width: 25px; --j-table-thbox-img-height: 25px; --j-table-thbox-h6-size: 26px; --j-table-thbox-h6-line: 26px; --j-table-tbody-td-size: 26px; --j-table-tbody-td-line: 26px; --j-table-tbody-td-h6-size: 26px; --j-table-tbody-td-h6-line: 26px; --j-table-tbody-td-h5-size: 27px; --j-expiry-msg-font-size: 40px; --j-btn-font-size: calc(100% - 7px); } .grid-4-2.jacquard { --j-mcnboxes-mcnbody: calc(100vh - 59vh); --j-mcnhead-h4-size: 30px; --j-mcnhead-h4-line: 30px; --j-mcnhead-img-width: 25px; --j-mcnhead-img-height: 25px; --j-mcniconnum-h5-img-width: 50px; --j-mcniconnum-h5-img-height: 50px; --j-mcniconnum-h5-size: 23px; --j-mcniconnum-h5-line: 23px; --j-mcniconnum-h6-size: 23px; --j-mcniconnum-h6-line: 23px; --j-mcnuser-h5-size: 23px; --j-mcnuser-h5-line: 23px; --j-timechart-progress-hight: 45px; --j-timechart-progress-font: 14px; --j-mcnrunstop-h4-img-width: 22px; --j-mcnrunstop-h4-img-height: 22px; --j-mcnrunstop-h4-size: 25px; --j-mcnrunstop-h4-line: 25px; --j-mcnrunstop-h4-span-size: 22px; --j-mcnrunstop-h4-span-line: 22px; --j-table-thbox-img-width: 18px; --j-table-thbox-img-height: 18px; --j-table-thbox-h6-size: 20px; --j-table-thbox-h6-line: 20px; --j-table-tbody-td-size: 20px; --j-table-tbody-td-line: 20px; --j-table-tbody-td-h6-size: 20px; --j-table-tbody-td-h6-line: 20px; --j-table-tbody-td-h5-size: 22px; --j-expiry-msg-font-size: 40px; --j-btn-font-size: calc(100% - 7px); } .grid-4-3.jacquard { --j-mcnboxes-mcnbody: calc(100vh - 73.5vh); --j-mcnhead-h4-size: 25px; --j-mcnhead-h4-line: 25px; --j-mcnhead-img-width: 20px; --j-mcnhead-img-height: 20px; --j-mcniconnum-h5-img-width: 26px; --j-mcniconnum-h5-img-height: 26px; --j-mcniconnum-h5-size: 18px; --j-mcniconnum-h5-line: 18px; --j-mcniconnum-h6-size: 18px; --j-mcniconnum-h6-line: 18px; --j-mcnuser-h5-size: 18px; --j-mcnuser-h5-line: 18px; --j-timechart-progress-hight: 20px; --j-timechart-progress-font: 14px; --j-mcnrunstop-h4-img-width: 16px; --j-mcnrunstop-h4-img-height: 16px; --j-mcnrunstop-h4-size: 18px; --j-mcnrunstop-h4-line: 18px; --j-mcnrunstop-h4-span-size: 16px; --j-mcnrunstop-h4-span-line: 16px; --j-table-thbox-img-width: 18px; --j-table-thbox-img-height: 18px; --j-table-thbox-h6-size: 18px; --j-table-thbox-h6-line: 18px; --j-table-tbody-td-size: 18px; --j-table-tbody-td-line: 18px; --j-table-tbody-td-h6-size: 18px; --j-table-tbody-td-h6-line: 18px; --j-table-tbody-td-h5-size: 22px; --j-expiry-msg-font-size: 30px; --j-btn-font-size: calc(100% - 5px); } .grid-5-3.jacquard { --j-mcnboxes-mcnbody: calc(100vh - 73.2vh); --j-mcnhead-h4-size: 20px; --j-mcnhead-h4-line: 20px; --j-mcnhead-img-width: 15px; --j-mcnhead-img-height: 15px; --j-mcniconnum-h5-img-width: 28px; --j-mcniconnum-h5-img-height: 28px; --j-mcniconnum-h5-size: 17px; --j-mcniconnum-h5-line: 17px; --j-mcniconnum-h6-size: 17px; --j-mcniconnum-h6-line: 17px; --j-mcnuser-h5-size: 17px; --j-mcnuser-h5-line: 17px; --j-timechart-progress-hight: 25px; --j-timechart-progress-font: 14px; --j-mcnrunstop-h4-img-width: 15px; --j-mcnrunstop-h4-img-height: 15px; --j-mcnrunstop-h4-size: 17px; --j-mcnrunstop-h4-line: 17px; --j-mcnrunstop-h4-span-size: 15px; --j-mcnrunstop-h4-span-line: 15px; --j-table-thbox-img-width: 15px; --j-table-thbox-img-height: 15px; --j-table-thbox-h6-size: 15px; --j-table-thbox-h6-line: 15px; --j-table-tbody-td-size: 15px; --j-table-tbody-td-line: 15px; --j-table-tbody-td-h6-size: 15px; --j-table-tbody-td-h6-line: 15px; --j-table-tbody-td-h5-size: 20px; --j-expiry-msg-font-size: 20px; --j-btn-font-size: calc(100% - 5px); } } /* --- 1768px --- */ @media (max-width: 1768.98px) { .grid-1.jacquard { --j-mcnboxes-mcnbody: calc(100vh - 216px); --j-mcnhead-h4-size: 100px; --j-mcnhead-h4-line: 100px; --j-mcnhead-img-width: 80px; --j-mcnhead-img-height: 80px; --j-mcniconnum-h5-img-width: 81px; --j-mcniconnum-h5-img-height: 81px; --j-mcniconnum-h5-size: 55px; --j-mcniconnum-h5-line: 55px; --j-mcniconnum-h6-size: 55px; --j-mcniconnum-h6-line: 55px; --j-mcnuser-h5-size: 55px; --j-mcnuser-h5-line: 55px; --j-timechart-progress-hight: 70px; --j-timechart-progress-font: 25px; --j-mcnrunstop-h4-img-width: 45px; --j-mcnrunstop-h4-img-height: 45px; --j-mcnrunstop-h4-size: 65px; --j-mcnrunstop-h4-line: 65px; --j-mcnrunstop-h4-span-size: 55px; --j-mcnrunstop-h4-span-line: 55px; --j-table-thbox-img-width: 55px; --j-table-thbox-img-height: 55px; --j-table-thbox-h6-size: 55px; --j-table-thbox-h6-line: 55px; --j-table-tbody-td-size: 55px; --j-table-tbody-td-line: 55px; --j-table-tbody-td-h6-size: 55px; --j-table-tbody-td-h6-line: 55px; --j-table-tbody-td-h5-size: 60px; --j-expiry-msg-font-size: 100px; --j-btn-font-size: calc(100% - 21px); } .grid-2.jacquard { --j-mcnboxes-mcnbody: calc(100vh - 60.2vh); --j-mcnhead-h4-size: 35px; --j-mcnhead-h4-line: 35px; --j-mcnhead-img-width: 30px; --j-mcnhead-img-height: 30px; --j-mcniconnum-h5-img-width: 36px; --j-mcniconnum-h5-img-height: 36px; --j-mcniconnum-h5-size: 30px; --j-mcniconnum-h5-line: 30px; --j-mcniconnum-h6-size: 30px; --j-mcniconnum-h6-line: 30px; --j-mcnuser-h5-size: 30px; --j-mcnuser-h5-line: 30px; --j-timechart-progress-hight: 35px; --j-timechart-progress-font: 18px; --j-mcnrunstop-h4-img-width: 20px; --j-mcnrunstop-h4-img-height: 20px; --j-mcnrunstop-h4-size: 25px; --j-mcnrunstop-h4-line: 25px; --j-mcnrunstop-h4-span-size: 20px; --j-mcnrunstop-h4-span-line: 20px; --j-table-thbox-img-width: 30px; --j-table-thbox-img-height: 30px; --j-table-thbox-h6-size: 30px; --j-table-thbox-h6-line: 30px; --j-table-tbody-td-size: 30px; --j-table-tbody-td-line: 30px; --j-table-tbody-td-h6-size: 30px; --j-table-tbody-td-h6-line: 30px; --j-table-tbody-td-h5-size: 32px; --j-expiry-msg-font-size: 50px; --j-btn-font-size: calc(100% - 10px); } .grid-3.jacquard { --j-mcnboxes-mcnbody: calc(100vh - 60.2vh); --j-mcnhead-h4-size: 30px; --j-mcnhead-h4-line: 30px; --j-mcnhead-img-width: 20px; --j-mcnhead-img-height: 20px; --j-mcniconnum-h5-img-width: 40px; --j-mcniconnum-h5-img-height: 40px; --j-mcniconnum-h5-size: 28px; --j-mcniconnum-h5-line: 28px; --j-mcniconnum-h6-size: 28px; --j-mcniconnum-h6-line: 28px; --j-mcnuser-h5-size: 28px; --j-mcnuser-h5-line: 28px; --j-timechart-progress-hight: 40px; --j-timechart-progress-font: 18px; --j-mcnrunstop-h4-img-width: 20px; --j-mcnrunstop-h4-img-height: 20px; --j-mcnrunstop-h4-size: 25px; --j-mcnrunstop-h4-line: 25px; --j-mcnrunstop-h4-span-size: 20px; --j-mcnrunstop-h4-span-line: 20px; --j-table-thbox-img-width: 20px; --j-table-thbox-img-height: 20px; --j-table-thbox-h6-size: 21px; --j-table-thbox-h6-line: 21px; --j-table-tbody-td-size: 21px; --j-table-tbody-td-line: 21px; --j-table-tbody-td-h6-size: 21px; --j-table-tbody-td-h6-line: 21px; --j-table-tbody-td-h5-size: 23px; --j-expiry-msg-font-size: 40px; --j-btn-font-size: calc(100% - 8px); } .grid-4-2.jacquard { --j-mcnboxes-mcnbody: calc(100vh - 59.8vh); --j-mcnhead-h4-size: 30px; --j-mcnhead-h4-line: 30px; --j-mcnhead-img-width: 25px; --j-mcnhead-img-height: 25px; --j-mcniconnum-h5-img-width: 43px; --j-mcniconnum-h5-img-height: 43px; --j-mcniconnum-h5-size: 20px; --j-mcniconnum-h5-line: 20px; --j-mcniconnum-h6-size: 20px; --j-mcniconnum-h6-line: 20px; --j-mcnuser-h5-size: 20px; --j-mcnuser-h5-line: 20px; --j-timechart-progress-hight: 45px; --j-timechart-progress-font: 14px; --j-mcnrunstop-h4-img-width: 20px; --j-mcnrunstop-h4-img-height: 20px; --j-mcnrunstop-h4-size: 25px; --j-mcnrunstop-h4-line: 25px; --j-mcnrunstop-h4-span-size: 20px; --j-mcnrunstop-h4-span-line: 20px; --j-table-thbox-img-width: 17px; --j-table-thbox-img-height: 17px; --j-table-thbox-h6-size: 19px; --j-table-thbox-h6-line: 19px; --j-table-tbody-td-size: 19px; --j-table-tbody-td-line: 19px; --j-table-tbody-td-h6-size: 19px; --j-table-tbody-td-h6-line: 19px; --j-table-tbody-td-h5-size: 22px; --j-expiry-msg-font-size: 40px; --j-btn-font-size: calc(100% - 5px); } .grid-4-3.jacquard { --j-mcnboxes-mcnbody: calc(100vh - 74.2vh); --j-mcnhead-h4-size: 25px; --j-mcnhead-h4-line: 25px; --j-mcnhead-img-width: 20px; --j-mcnhead-img-height: 20px; --j-mcniconnum-h5-img-width: 23px; --j-mcniconnum-h5-img-height: 23px; --j-mcniconnum-h5-size: 15px; --j-mcniconnum-h5-line: 15px; --j-mcniconnum-h6-size: 15px; --j-mcniconnum-h6-line: 15px; --j-mcnuser-h5-size: 15px; --j-mcnuser-h5-line: 15px; --j-timechart-progress-hight: 20px; --j-timechart-progress-font: 14px; --j-mcnrunstop-h4-img-width: 12px; --j-mcnrunstop-h4-img-height: 12px; --j-mcnrunstop-h4-size: 13px; --j-mcnrunstop-h4-line: 13px; --j-mcnrunstop-h4-span-size: 12px; --j-mcnrunstop-h4-span-line: 12px; --j-table-thbox-img-width: 16px; --j-table-thbox-img-height: 16px; --j-table-thbox-h6-size: 15px; --j-table-thbox-h6-line: 15px; --j-table-tbody-td-size: 15px; --j-table-tbody-td-line: 15px; --j-table-tbody-td-h6-size: 15px; --j-table-tbody-td-h6-line: 15px; --j-table-tbody-td-h5-size: 20px; --j-expiry-msg-font-size: 30px; --j-btn-font-size: calc(100% - 6px); } .grid-5-3.jacquard { --j-mcnboxes-mcnbody: calc(100vh - 73.8vh); --j-mcnhead-h4-size: 20px; --j-mcnhead-h4-line: 20px; --j-mcnhead-img-width: 15px; --j-mcnhead-img-height: 15px; --j-mcniconnum-h5-img-width: 25px; --j-mcniconnum-h5-img-height: 25px; --j-mcniconnum-h5-size: 14px; --j-mcniconnum-h5-line: 14px; --j-mcniconnum-h6-size: 14px; --j-mcniconnum-h6-line: 14px; --j-mcnuser-h5-size: 14px; --j-mcnuser-h5-line: 14px; --j-timechart-progress-hight: 25px; --j-timechart-progress-font: 14px; --j-mcnrunstop-h4-img-width: 15px; --j-mcnrunstop-h4-img-height: 15px; --j-mcnrunstop-h4-size: 17px; --j-mcnrunstop-h4-line: 17px; --j-mcnrunstop-h4-span-size: 15px; --j-mcnrunstop-h4-span-line: 15px; --j-table-thbox-img-width: 13px; --j-table-thbox-img-height: 13px; --j-table-thbox-h6-size: 13px; --j-table-thbox-h6-line: 13px; --j-table-tbody-td-size: 13px; --j-table-tbody-td-line: 13px; --j-table-tbody-td-h6-size: 13px; --j-table-tbody-td-h6-line: 13px; --j-table-tbody-td-h5-size: 17px; --j-expiry-msg-font-size: 20px; --j-btn-font-size: calc(100% - 4px); } } /* --- 1680px --- */ @media (max-width: 1680.98px) { .grid-1.jacquard { --j-mcnboxes-mcnbody: calc(100vh - 216px); --j-mcnhead-h4-size: 93px; --j-mcnhead-h4-line: 93px; --j-mcnhead-img-width: 80px; --j-mcnhead-img-height: 80px; --j-mcniconnum-h5-img-width: 89px; --j-mcniconnum-h5-img-height: 89px; --j-mcniconnum-h5-size: 66px; --j-mcniconnum-h5-line: 66px; --j-mcniconnum-h6-size: 66px; --j-mcniconnum-h6-line: 66px; --j-mcnuser-h5-size: 66px; --j-mcnuser-h5-line: 66px; --j-timechart-progress-hight: 75px; --j-timechart-progress-font: 25px; --j-mcnrunstop-h4-img-width: 45px; --j-mcnrunstop-h4-img-height: 45px; --j-mcnrunstop-h4-size: 65px; --j-mcnrunstop-h4-line: 65px; --j-mcnrunstop-h4-span-size: 55px; --j-mcnrunstop-h4-span-line: 55px; --j-table-thbox-img-width: 55px; --j-table-thbox-img-height: 55px; --j-table-thbox-h6-size: 55px; --j-table-thbox-h6-line: 55px; --j-table-tbody-td-size: 55px; --j-table-tbody-td-line: 55px; --j-table-tbody-td-h6-size: 57px; --j-table-tbody-td-h6-line: 57px; --j-table-tbody-td-h5-size: 57px; --j-expiry-msg-font-size: 90px; --j-btn-font-size: calc(100% - 30px); } .grid-2.jacquard { --j-mcnboxes-mcnbody: calc(100vh - 60vh); --j-mcnhead-h4-size: 35px; --j-mcnhead-h4-line: 35px; --j-mcnhead-img-width: 30px; --j-mcnhead-img-height: 30px; --j-mcniconnum-h5-img-width: 42px; --j-mcniconnum-h5-img-height: 42px; --j-mcniconnum-h5-size: 27px; --j-mcniconnum-h5-line: 27px; --j-mcniconnum-h6-size: 27px; --j-mcniconnum-h6-line: 27px; --j-mcnuser-h5-size: 27px; --j-mcnuser-h5-line: 27px; --j-timechart-progress-hight: 35px; --j-timechart-progress-font: 18px; --j-mcnrunstop-h4-img-width: 20px; --j-mcnrunstop-h4-img-height: 20px; --j-mcnrunstop-h4-size: 25px; --j-mcnrunstop-h4-line: 25px; --j-mcnrunstop-h4-span-size: 20px; --j-mcnrunstop-h4-span-line: 20px; --j-table-thbox-img-width: 30px; --j-table-thbox-img-height: 30px; --j-table-thbox-h6-size: 27px; --j-table-thbox-h6-line: 27px; --j-table-tbody-td-size: 27px; --j-table-tbody-td-line: 27px; --j-table-tbody-td-h6-size: 27px; --j-table-tbody-td-h6-line: 27px; --j-table-tbody-td-h5-size: 27px; --j-expiry-msg-font-size: 50px; --j-btn-font-size: calc(100% - 5px); } .grid-3.jacquard { --j-mcnboxes-mcnbody: calc(100vh - 59.5vh); --j-mcnhead-h4-size: 30px; --j-mcnhead-h4-line: 30px; --j-mcnhead-img-width: 20px; --j-mcnhead-img-height: 20px; --j-mcniconnum-h5-img-width: 45px; --j-mcniconnum-h5-img-height: 45px; --j-mcniconnum-h5-size: 24px; --j-mcniconnum-h5-line: 24px; --j-mcniconnum-h6-size: 24px; --j-mcniconnum-h6-line: 24px; --j-mcnuser-h5-size: 24px; --j-mcnuser-h5-line: 24px; --j-timechart-progress-hight: 45px; --j-timechart-progress-font: 18px; --j-mcnrunstop-h4-img-width: 25px; --j-mcnrunstop-h4-img-height: 25px; --j-mcnrunstop-h4-size: 30px; --j-mcnrunstop-h4-line: 30px; --j-mcnrunstop-h4-span-size: 25px; --j-mcnrunstop-h4-span-line: 25px; --j-table-thbox-img-width: 20px; --j-table-thbox-img-height: 20px; --j-table-thbox-h6-size: 24px; --j-table-thbox-h6-line: 24px; --j-table-tbody-td-size: 24px; --j-table-tbody-td-line: 24px; --j-table-tbody-td-h6-size: 24px; --j-table-tbody-td-h6-line: 24px; --j-table-tbody-td-h5-size: 24px; --j-expiry-msg-font-size: 40px; --j-btn-font-size: calc(100% - 5px); } .grid-4-2.jacquard { --j-mcnboxes-mcnbody: calc(100vh - 59.5vh); --j-mcnhead-h4-size: 30px; --j-mcnhead-h4-line: 30px; --j-mcnhead-img-width: 25px; --j-mcnhead-img-height: 25px; --j-mcniconnum-h5-img-width: 50px; --j-mcniconnum-h5-img-height: 50px; --j-mcniconnum-h5-size: 20px; --j-mcniconnum-h5-line: 20px; --j-mcniconnum-h6-size: 20px; --j-mcniconnum-h6-line: 20px; --j-mcnuser-h5-size: 20px; --j-mcnuser-h5-line: 20px; --j-timechart-progress-hight: 35px; --j-timechart-progress-font: 14px; --j-mcnrunstop-h4-img-width: 20px; --j-mcnrunstop-h4-img-height: 20px; --j-mcnrunstop-h4-size: 24px; --j-mcnrunstop-h4-line: 24px; --j-mcnrunstop-h4-span-size: 20px; --j-mcnrunstop-h4-span-line: 20px; --j-table-thbox-img-width: 14px; --j-table-thbox-img-height: 14px; --j-table-thbox-h6-size: 17px; --j-table-thbox-h6-line: 17px; --j-table-tbody-td-size: 17px; --j-table-tbody-td-line: 17px; --j-table-tbody-td-h6-size: 17px; --j-table-tbody-td-h6-line: 17px; --j-table-tbody-td-h5-size: 20px; --j-expiry-msg-font-size: 40px; --j-btn-font-size: calc(100% - 7px); } .grid-4-3.jacquard { --j-mcnboxes-mcnbody: calc(100vh - 73.8vh); --j-mcnhead-h4-size: 25px; --j-mcnhead-h4-line: 25px; --j-mcnhead-img-width: 20px; --j-mcnhead-img-height: 20px; --j-mcniconnum-h5-img-width: 26px; --j-mcniconnum-h5-img-height: 26px; --j-mcniconnum-h5-size: 16px; --j-mcniconnum-h5-line: 16px; --j-mcniconnum-h6-size: 16px; --j-mcniconnum-h6-line: 16px; --j-mcnuser-h5-size: 16px; --j-mcnuser-h5-line: 16px; --j-timechart-progress-hight: 25px; --j-timechart-progress-font: 14px; --j-mcnrunstop-h4-img-width: 12px; --j-mcnrunstop-h4-img-height: 12px; --j-mcnrunstop-h4-size: 16px; --j-mcnrunstop-h4-line: 16px; --j-mcnrunstop-h4-span-size: 12px; --j-mcnrunstop-h4-span-line: 12px; --j-table-thbox-img-width: 16px; --j-table-thbox-img-height: 16px; --j-table-thbox-h6-size: 15px; --j-table-thbox-h6-line: 15px; --j-table-tbody-td-size: 15px; --j-table-tbody-td-line: 15px; --j-table-tbody-td-h6-size: 15px; --j-table-tbody-td-h6-line: 15px; --j-table-tbody-td-h5-size: 18px; --j-expiry-msg-font-size: 30px; --j-btn-font-size: calc(100% - 2px); } .grid-5-3.jacquard { --j-mcnboxes-mcnbody: calc(100vh - 73.5vh); --j-mcnhead-h4-size: 20px; --j-mcnhead-h4-line: 20px; --j-mcnhead-img-width: 15px; --j-mcnhead-img-height: 15px; --j-mcniconnum-h5-img-width: 28px; --j-mcniconnum-h5-img-height: 28px; --j-mcniconnum-h5-size: 15px; --j-mcniconnum-h5-line: 15px; --j-mcniconnum-h6-size: 15px; --j-mcniconnum-h6-line: 15px; --j-mcnuser-h5-size: 15px; --j-mcnuser-h5-line: 15px; --j-timechart-progress-hight: 25px; --j-timechart-progress-font: 14px; --j-mcnrunstop-h4-img-width: 12px; --j-mcnrunstop-h4-img-height: 12px; --j-mcnrunstop-h4-size: 15px; --j-mcnrunstop-h4-line: 15px; --j-mcnrunstop-h4-span-size: 12px; --j-mcnrunstop-h4-span-line: 12px; --j-table-thbox-img-width: 12px; --j-table-thbox-img-height: 12px; --j-table-thbox-h6-size: 13px; --j-table-thbox-h6-line: 13px; --j-table-tbody-td-size: 13px; --j-table-tbody-td-line: 13px; --j-table-tbody-td-h6-size: 13px; --j-table-tbody-td-h6-line: 13px; --j-table-tbody-td-h5-size: 17px; --j-expiry-msg-font-size: 20px; --j-btn-font-size: calc(100% - 2px); } } /* --- 1600px --- */ @media (max-width: 1600px) { .grid-1.jacquard { --j-mcnboxes-mcnbody: calc(100vh - 216px); --j-mcnhead-h4-size: 70px; --j-mcnhead-h4-line: 70px; --j-mcnhead-img-width: 70px; --j-mcnhead-img-height: 70px; --j-mcniconnum-h5-img-width: 68px; --j-mcniconnum-h5-img-height: 68px; --j-mcniconnum-h5-size: 50px; --j-mcniconnum-h5-line: 50px; --j-mcniconnum-h6-size: 50px; --j-mcniconnum-h6-line: 50px; --j-mcnuser-h5-size: 50px; --j-mcnuser-h5-line: 50px; --j-timechart-progress-hight: 40px; --j-timechart-progress-font: 25px; --j-mcnrunstop-h4-img-width: 35px; --j-mcnrunstop-h4-img-height: 35px; --j-mcnrunstop-h4-size: 35px; --j-mcnrunstop-h4-line: 35px; --j-mcnrunstop-h4-span-size: 35px; --j-mcnrunstop-h4-span-line: 35px; --j-table-thbox-img-width: 55px; --j-table-thbox-img-height: 55px; --j-table-thbox-h6-size: 50px; --j-table-thbox-h6-line: 50px; --j-table-tbody-td-size: 50px; --j-table-tbody-td-line: 50px; --j-table-tbody-td-h6-size: 57px; --j-table-tbody-td-h6-line: 57px; --j-table-tbody-td-h5-size: 57px; --j-expiry-msg-font-size: 90px; --j-btn-font-size: calc(100% - 20px); } .grid-2.jacquard { --j-mcnboxes-mcnbody: calc(100vh - 61vh); --j-mcnhead-h4-size: 30px; --j-mcnhead-h4-line: 30px; --j-mcnhead-img-width: 30px; --j-mcnhead-img-height: 30px; --j-mcniconnum-h5-img-width: 31px; --j-mcniconnum-h5-img-height: 31px; --j-mcniconnum-h5-size: 27px; --j-mcniconnum-h5-line: 27px; --j-mcniconnum-h6-size: 27px; --j-mcniconnum-h6-line: 27px; --j-mcnuser-h5-size: 27px; --j-mcnuser-h5-line: 27px; --j-timechart-progress-hight: 25px; --j-timechart-progress-font: 18px; --j-mcnrunstop-h4-img-width: 20px; --j-mcnrunstop-h4-img-height: 20px; --j-mcnrunstop-h4-size: 25px; --j-mcnrunstop-h4-line: 25px; --j-mcnrunstop-h4-span-size: 20px; --j-mcnrunstop-h4-span-line: 20px; --j-table-thbox-img-width: 30px; --j-table-thbox-img-height: 30px; --j-table-thbox-h6-size: 27px; --j-table-thbox-h6-line: 27px; --j-table-tbody-td-size: 27px; --j-table-tbody-td-line: 27px; --j-table-tbody-td-h6-size: 27px; --j-table-tbody-td-h6-line: 27px; --j-table-tbody-td-h5-size: 27px; --j-expiry-msg-font-size: 50px; --j-btn-font-size: calc(100% - 10px); } .grid-3.jacquard { --j-mcnboxes-mcnbody: calc(100vh - 60vh); --j-mcnhead-h4-size: 25px; --j-mcnhead-h4-line: 25px; --j-mcnhead-img-width: 25px; --j-mcnhead-img-height: 25px; --j-mcniconnum-h5-img-width: 35px; --j-mcniconnum-h5-img-height: 35px; --j-mcniconnum-h5-size: 23px; --j-mcniconnum-h5-line: 23px; --j-mcniconnum-h6-size: 23px; --j-mcniconnum-h6-line: 23px; --j-mcnuser-h5-size: 23px; --j-mcnuser-h5-line: 23px; --j-timechart-progress-hight: 25px; --j-timechart-progress-font: 16px; --j-mcnrunstop-h4-img-width: 20px; --j-mcnrunstop-h4-img-height: 20px; --j-mcnrunstop-h4-size: 20px; --j-mcnrunstop-h4-line: 20px; --j-mcnrunstop-h4-span-size: 20px; --j-mcnrunstop-h4-span-line: 20px; --j-table-thbox-img-width: 20px; --j-table-thbox-img-height: 20px; --j-table-thbox-h6-size: 22px; --j-table-thbox-h6-line: 22px; --j-table-tbody-td-size: 22px; --j-table-tbody-td-line: 22px; --j-table-tbody-td-h6-size: 24px; --j-table-tbody-td-h6-line: 24px; --j-table-tbody-td-h5-size: 25px; --j-expiry-msg-font-size: 40px; --j-btn-font-size: calc(100% - 8px); } .grid-4-2.jacquard { --j-mcnboxes-mcnbody: calc(100vh - 60.3vh); --j-mcnhead-h4-size: 20px; --j-mcnhead-h4-line: 20px; --j-mcnhead-img-width: 20px; --j-mcnhead-img-height: 20px; --j-mcniconnum-h5-img-width: 38px; --j-mcniconnum-h5-img-height: 38px; --j-mcniconnum-h5-size: 18px; --j-mcniconnum-h5-line: 18px; --j-mcniconnum-h6-size: 18px; --j-mcniconnum-h6-line: 18px; --j-mcnuser-h5-size: 18px; --j-mcnuser-h5-line: 18px; --j-timechart-progress-hight: 25px; --j-timechart-progress-font: 14px; --j-mcnrunstop-h4-img-width: 18px; --j-mcnrunstop-h4-img-height: 18px; --j-mcnrunstop-h4-size: 18px; --j-mcnrunstop-h4-line: 18px; --j-mcnrunstop-h4-span-size: 18px; --j-mcnrunstop-h4-span-line: 18px; --j-table-thbox-img-width: 14px; --j-table-thbox-img-height: 14px; --j-table-thbox-h6-size: 17px; --j-table-thbox-h6-line: 17px; --j-table-tbody-td-size: 17px; --j-table-tbody-td-line: 17px; --j-table-tbody-td-h6-size: 17px; --j-table-tbody-td-h6-line: 17px; --j-table-tbody-td-h5-size: 20px; --j-expiry-msg-font-size: 40px; --j-btn-font-size: calc(100% - 5px); } .grid-4-3.jacquard { --j-mcnboxes-mcnbody: calc(100vh - 73.8vh); --j-mcnhead-h4-size: 15px; --j-mcnhead-h4-line: 15px; --j-mcnhead-img-width: 15px; --j-mcnhead-img-height: 15px; --j-mcniconnum-h5-img-width: 20px; --j-mcniconnum-h5-img-height: 20px; --j-mcniconnum-h5-size: 16px; --j-mcniconnum-h5-line: 16px; --j-mcniconnum-h6-size: 16px; --j-mcniconnum-h6-line: 16px; --j-mcnuser-h5-size: 16px; --j-mcnuser-h5-line: 16px; --j-timechart-progress-hight: 18px; --j-timechart-progress-font: 14px; --j-mcnrunstop-h4-img-width: 12px; --j-mcnrunstop-h4-img-height: 12px; --j-mcnrunstop-h4-size: 12px; --j-mcnrunstop-h4-line: 12px; --j-mcnrunstop-h4-span-size: 12px; --j-mcnrunstop-h4-span-line: 12px; --j-table-thbox-img-width: 16px; --j-table-thbox-img-height: 16px; --j-table-thbox-h6-size: 15px; --j-table-thbox-h6-line: 15px; --j-table-tbody-td-size: 15px; --j-table-tbody-td-line: 15px; --j-table-tbody-td-h6-size: 15px; --j-table-tbody-td-h6-line: 15px; --j-table-tbody-td-h5-size: 18px; --j-expiry-msg-font-size: 30px; --j-btn-font-size: calc(100% - 3px); } .grid-5-3.jacquard { --j-mcnboxes-mcnbody: calc(100vh - 73.8vh); --j-mcnhead-h4-size: 15px; --j-mcnhead-h4-line: 15px; --j-mcnhead-img-width: 15px; --j-mcnhead-img-height: 15px; --j-mcniconnum-h5-img-width: 21px; --j-mcniconnum-h5-img-height: 21px; --j-mcniconnum-h5-size: 15px; --j-mcniconnum-h5-line: 15px; --j-mcniconnum-h6-size: 15px; --j-mcniconnum-h6-line: 15px; --j-mcnuser-h5-size: 15px; --j-mcnuser-h5-line: 15px; --j-timechart-progress-hight: 20px; --j-timechart-progress-font: 14px; --j-mcnrunstop-h4-img-width: 12px; --j-mcnrunstop-h4-img-height: 12px; --j-mcnrunstop-h4-size: 12px; --j-mcnrunstop-h4-line: 12px; --j-mcnrunstop-h4-span-size: 12px; --j-mcnrunstop-h4-span-line: 12px; --j-table-thbox-img-width: 12px; --j-table-thbox-img-height: 12px; --j-table-thbox-h6-size: 13px; --j-table-thbox-h6-line: 13px; --j-table-tbody-td-size: 13px; --j-table-tbody-td-line: 13px; --j-table-tbody-td-h6-size: 13px; --j-table-tbody-td-h6-line: 13px; --j-table-tbody-td-h5-size: 17px; --j-expiry-msg-font-size: 20px; --j-btn-font-size: calc(100% - 2px); } } /* --- 1440px --- */ @media (max-width: 1440.98px) { .grid-1.jacquard { --j-mcnboxes-mcnbody: calc(100vh - 200px); --j-mcnhead-h4-size: 60px; --j-mcnhead-h4-line: 60px; --j-mcnhead-img-width: 60px; --j-mcnhead-img-height: 60px; --j-mcniconnum-h5-img-width: 72px; --j-mcniconnum-h5-img-height: 72px; --j-mcniconnum-h5-size: 52px; --j-mcniconnum-h5-line: 52px; --j-mcniconnum-h6-size: 52px; --j-mcniconnum-h6-line: 52px; --j-mcnuser-h5-size: 52px; --j-mcnuser-h5-line: 52px; --j-timechart-progress-hight: 55px; --j-timechart-progress-font: 20px; --j-mcnrunstop-h4-img-width: 45px; --j-mcnrunstop-h4-img-height: 45px; --j-mcnrunstop-h4-size: 55px; --j-mcnrunstop-h4-line: 55px; --j-mcnrunstop-h4-span-size: 45px; --j-mcnrunstop-h4-span-line: 45px; --j-table-thbox-img-width: 45px; --j-table-thbox-img-height: 45px; --j-table-thbox-h6-size: 52px; --j-table-thbox-h6-line: 52px; --j-table-tbody-td-size: 52px; --j-table-tbody-td-line: 52px; --j-table-tbody-td-h6-size: 52px; --j-table-tbody-td-h6-line: 52px; --j-table-tbody-td-h5-size: 52px; --j-expiry-msg-font-size: 80px; --j-btn-font-size: calc(100% - 20px); } .grid-2.jacquard { --j-mcnboxes-mcnbody: calc(100vh - 61vh); --j-mcnhead-h4-size: 30px; --j-mcnhead-h4-line: 30px; --j-mcnhead-img-width: 25px; --j-mcnhead-img-height: 25px; --j-mcniconnum-h5-img-width: 34px; --j-mcniconnum-h5-img-height: 34px; --j-mcniconnum-h5-size: 25px; --j-mcniconnum-h5-line: 25px; --j-mcniconnum-h6-size: 25px; --j-mcniconnum-h6-line: 25px; --j-mcnuser-h5-size: 25px; --j-mcnuser-h5-line: 25px; --j-timechart-progress-hight: 30px; --j-timechart-progress-font: 18px; --j-mcnrunstop-h4-img-width: 18px; --j-mcnrunstop-h4-img-height: 18px; --j-mcnrunstop-h4-size: 22px; --j-mcnrunstop-h4-line: 22px; --j-mcnrunstop-h4-span-size: 18px; --j-mcnrunstop-h4-span-line: 18px; --j-table-thbox-img-width: 25px; --j-table-thbox-img-height: 25px; --j-table-thbox-h6-size: 22px; --j-table-thbox-h6-line: 22px; --j-table-tbody-td-size: 22px; --j-table-tbody-td-line: 22px; --j-table-tbody-td-h6-size: 22px; --j-table-tbody-td-h6-line: 22px; --j-table-tbody-td-h5-size: 22px; --j-expiry-msg-font-size: 40px; --j-btn-font-size: calc(100% - 5px); } .grid-3.jacquard { --j-mcnboxes-mcnbody: calc(100vh - 61.2vh); --j-mcnhead-h4-size: 30px; --j-mcnhead-h4-line: 30px; --j-mcnhead-img-width: 20px; --j-mcnhead-img-height: 20px; --j-mcniconnum-h5-img-width: 35px; --j-mcniconnum-h5-img-height: 35px; --j-mcniconnum-h5-size: 20px; --j-mcniconnum-h5-line: 20px; --j-mcniconnum-h6-size: 20px; --j-mcniconnum-h6-line: 20px; --j-mcnuser-h5-size: 20px; --j-mcnuser-h5-line: 20px; --j-timechart-progress-hight: 35px; --j-timechart-progress-font: 14px; --j-mcnrunstop-h4-img-width: 20px; --j-mcnrunstop-h4-img-height: 20px; --j-mcnrunstop-h4-size: 25px; --j-mcnrunstop-h4-line: 25px; --j-mcnrunstop-h4-span-size: 20px; --j-mcnrunstop-h4-span-line: 20px; --j-table-thbox-img-width: 18px; --j-table-thbox-img-height: 18px; --j-table-thbox-h6-size: 20px; --j-table-thbox-h6-line: 20px; --j-table-tbody-td-size: 20px; --j-table-tbody-td-line: 20px; --j-table-tbody-td-h6-size: 20px; --j-table-tbody-td-h6-line: 20px; --j-table-tbody-td-h5-size: 21px; --j-expiry-msg-font-size: 40px; --j-btn-font-size: calc(100% - 5px); } .grid-4-2.jacquard { --j-mcnboxes-mcnbody: calc(100vh - 59.5vh); --j-mcnhead-h4-size: 20px; --j-mcnhead-h4-line: 20px; --j-mcnhead-img-width: 15px; --j-mcnhead-img-height: 15px; --j-mcniconnum-h5-img-width: 40px; --j-mcniconnum-h5-img-height: 40px; --j-mcniconnum-h5-size: 17px; --j-mcniconnum-h5-line: 17px; --j-mcniconnum-h6-size: 17px; --j-mcniconnum-h6-line: 17px; --j-mcnuser-h5-size: 17px; --j-mcnuser-h5-line: 17px; --j-timechart-progress-hight: 35px; --j-timechart-progress-font: 14px; --j-mcnrunstop-h4-img-width: 15px; --j-mcnrunstop-h4-img-height: 15px; --j-mcnrunstop-h4-size: 20px; --j-mcnrunstop-h4-line: 20px; --j-mcnrunstop-h4-span-size: 15px; --j-mcnrunstop-h4-span-line: 15px; --j-table-thbox-img-width: 14px; --j-table-thbox-img-height: 14px; --j-table-thbox-h6-size: 15px; --j-table-thbox-h6-line: 15px; --j-table-tbody-td-size: 15px; --j-table-tbody-td-line: 15px; --j-table-tbody-td-h6-size: 15px; --j-table-tbody-td-h6-line: 15px; --j-table-tbody-td-h5-size: 20px; --j-expiry-msg-font-size: 30px; --j-btn-font-size: calc(100% - 4px); } .grid-4-3.jacquard { --j-mcnboxes-mcnbody: calc(100vh - 74.5vh); --j-mcnhead-h4-size: 16px; --j-mcnhead-h4-line: 16px; --j-mcnhead-img-width: 14px; --j-mcnhead-img-height: 14px; --j-mcniconnum-h5-img-width: 20px; --j-mcniconnum-h5-img-height: 20px; --j-mcniconnum-h5-size: 15px; --j-mcniconnum-h5-line: 15px; --j-mcniconnum-h6-size: 15px; --j-mcniconnum-h6-line: 15px; --j-mcnuser-h5-size: 15px; --j-mcnuser-h5-line: 15px; --j-timechart-progress-hight: 20px; --j-timechart-progress-font: 14px; --j-mcnrunstop-h4-img-width: 10px; --j-mcnrunstop-h4-img-height: 10px; --j-mcnrunstop-h4-size: 13px; --j-mcnrunstop-h4-line: 13px; --j-mcnrunstop-h4-span-size: 10px; --j-mcnrunstop-h4-span-line: 10px; --j-table-thbox-img-width: 13px; --j-table-thbox-img-height: 13px; --j-table-thbox-h6-size: 13px; --j-table-thbox-h6-line: 13px; --j-table-tbody-td-size: 13px; --j-table-tbody-td-line: 13px; --j-table-tbody-td-h6-size: 13px; --j-table-tbody-td-h6-line: 13px; --j-table-tbody-td-h5-size: 17px; --j-expiry-msg-font-size: 30px; --j-btn-font-size: calc(100% - 2px); } .grid-5-3.jacquard { --j-mcnboxes-mcnbody: calc(100vh - 73.8vh); --j-mcnhead-h4-size: 15px; --j-mcnhead-h4-line: 15px; --j-mcnhead-img-width: 12px; --j-mcnhead-img-height: 12px; --j-mcniconnum-h5-img-width: 22px; --j-mcniconnum-h5-img-height: 22px; --j-mcniconnum-h5-size: 13px; --j-mcniconnum-h5-line: 13px; --j-mcniconnum-h6-size: 13px; --j-mcniconnum-h6-line: 13px; --j-mcnuser-h5-size: 13px; --j-mcnuser-h5-line: 13px; --j-timechart-progress-hight: 20px; --j-timechart-progress-font: 14px; --j-mcnrunstop-h4-img-width: 12px; --j-mcnrunstop-h4-img-height: 12px; --j-mcnrunstop-h4-size: 15px; --j-mcnrunstop-h4-line: 15px; --j-mcnrunstop-h4-span-size: 12px; --j-mcnrunstop-h4-span-line: 12px; --j-table-thbox-img-width: 10px; --j-table-thbox-img-height: 10px; --j-table-thbox-h6-size: 11px; --j-table-thbox-h6-line: 11px; --j-table-tbody-td-size: 11px; --j-table-tbody-td-line: 11px; --j-table-tbody-td-h6-size: 11px; --j-table-tbody-td-h6-line: 11px; --j-table-tbody-td-h5-size: 17px; --j-expiry-msg-font-size: 20px; --j-btn-font-size: calc(100% - 2px); } } /* --- 1366px --- */ @media (max-width: 1366.98px) { .grid-1.jacquard { --j-mcnboxes-mcnbody: calc(100vh - 186px); --j-mcnhead-h4-size: 70px; --j-mcnhead-h4-line: 70px; --j-mcnhead-img-width: 55px; --j-mcnhead-img-height: 55px; --j-mcniconnum-h5-img-width: 59px; --j-mcniconnum-h5-img-height: 59px; --j-mcniconnum-h5-size: 53px; --j-mcniconnum-h5-line: 53px; --j-mcniconnum-h6-size: 53px; --j-mcniconnum-h6-line: 53px; --j-mcnuser-h5-size: 53px; --j-mcnuser-h5-line: 53px; --j-timechart-progress-hight: 55px; --j-timechart-progress-font: 20px; --j-mcnrunstop-h4-img-width: 35px; --j-mcnrunstop-h4-img-height: 35px; --j-mcnrunstop-h4-size: 45px; --j-mcnrunstop-h4-line: 45px; --j-mcnrunstop-h4-span-size: 40px; --j-mcnrunstop-h4-span-line: 40px; --j-table-thbox-img-width: 40px; --j-table-thbox-img-height: 40px; --j-table-thbox-h6-size: 40px; --j-table-thbox-h6-line: 40px; --j-table-tbody-td-size: 40px; --j-table-tbody-td-line: 40px; --j-table-tbody-td-h6-size: 40px; --j-table-tbody-td-h6-line: 40px; --j-table-tbody-td-h5-size: 36px; --j-expiry-msg-font-size: 70px; --j-btn-font-size: calc(100% - 20px); } .grid-2.jacquard { --j-mcnboxes-mcnbody: calc(100vh - 62vh); --j-mcnhead-h4-size: 25px; --j-mcnhead-h4-line: 25px; --j-mcnhead-img-width: 20px; --j-mcnhead-img-height: 20px; --j-mcniconnum-h5-img-width: 25px; --j-mcniconnum-h5-img-height: 25px; --j-mcniconnum-h5-size: 23px; --j-mcniconnum-h5-line: 23px; --j-mcniconnum-h6-size: 23px; --j-mcniconnum-h6-line: 23px; --j-mcnuser-h5-size: 23px; --j-mcnuser-h5-line: 23px; --j-timechart-progress-hight: 20px; --j-timechart-progress-font: 14px; --j-mcnrunstop-h4-img-width: 12px; --j-mcnrunstop-h4-img-height: 12px; --j-mcnrunstop-h4-size: 18px; --j-mcnrunstop-h4-line: 18px; --j-mcnrunstop-h4-span-size: 12px; --j-mcnrunstop-h4-span-line: 12px; --j-table-thbox-img-width: 20px; --j-table-thbox-img-height: 20px; --j-table-thbox-h6-size: 21px; --j-table-thbox-h6-line: 21px; --j-table-tbody-td-size: 21px; --j-table-tbody-td-line: 21px; --j-table-tbody-td-h6-size: 21px; --j-table-tbody-td-h6-line: 21px; --j-table-tbody-td-h5-size: 22px; --j-expiry-msg-font-size: 40px; --j-btn-font-size: calc(100% - 5px); } .grid-3.jacquard { --j-mcnboxes-mcnbody: calc(100vh - 62vh); --j-mcnhead-h4-size: 25px; --j-mcnhead-h4-line: 25px; --j-mcnhead-img-width: 20px; --j-mcnhead-img-height: 20px; --j-mcniconnum-h5-img-width: 27px; --j-mcniconnum-h5-img-height: 27px; --j-mcniconnum-h5-size: 21px; --j-mcniconnum-h5-line: 21px; --j-mcniconnum-h6-size: 21px; --j-mcniconnum-h6-line: 21px; --j-mcnuser-h5-size: 21px; --j-mcnuser-h5-line: 21px; --j-timechart-progress-hight: 30px; --j-timechart-progress-font: 14px; --j-mcnrunstop-h4-img-width: 12px; --j-mcnrunstop-h4-img-height: 12px; --j-mcnrunstop-h4-size: 15px; --j-mcnrunstop-h4-line: 15px; --j-mcnrunstop-h4-span-size: 12px; --j-mcnrunstop-h4-span-line: 12px; --j-table-thbox-img-width: 17px; --j-table-thbox-img-height: 17px; --j-table-thbox-h6-size: 17px; --j-table-thbox-h6-line: 17px; --j-table-tbody-td-size: 17px; --j-table-tbody-td-line: 17px; --j-table-tbody-td-h6-size: 17px; --j-table-tbody-td-h6-line: 17px; --j-table-tbody-td-h5-size: 19px; --j-expiry-msg-font-size: 30px; --j-btn-font-size: calc(100% - 5px); } .grid-4-2.jacquard { --j-mcnboxes-mcnbody: calc(100vh - 61.5vh); --j-mcnhead-h4-size: 20px; --j-mcnhead-h4-line: 20px; --j-mcnhead-img-width: 15px; --j-mcnhead-img-height: 15px; --j-mcniconnum-h5-img-width: 30px; --j-mcniconnum-h5-img-height: 30px; --j-mcniconnum-h5-size: 16px; --j-mcniconnum-h5-line: 16px; --j-mcniconnum-h6-size: 16px; --j-mcniconnum-h6-line: 16px; --j-mcnuser-h5-size: 16px; --j-mcnuser-h5-line: 16px; --j-timechart-progress-hight: 30px; --j-timechart-progress-font: 14px; --j-mcnrunstop-h4-img-width: 15px; --j-mcnrunstop-h4-img-height: 15px; --j-mcnrunstop-h4-size: 20px; --j-mcnrunstop-h4-line: 20px; --j-mcnrunstop-h4-span-size: 15px; --j-mcnrunstop-h4-span-line: 15px; --j-table-thbox-img-width: 13px; --j-table-thbox-img-height: 13px; --j-table-thbox-h6-size: 14px; --j-table-thbox-h6-line: 14px; --j-table-tbody-td-size: 14px; --j-table-tbody-td-line: 14px; --j-table-tbody-td-h6-size: 14px; --j-table-tbody-td-h6-line: 14px; --j-table-tbody-td-h5-size: 20px; --j-expiry-msg-font-size: 30px; --j-btn-font-size: calc(100% - 4px); } .grid-4-3.jacquard { --j-mcnboxes-mcnbody: calc(100vh - 75vh); --j-mcnhead-h4-size: 12px; --j-mcnhead-h4-line: 12px; --j-mcnhead-img-width: 10px; --j-mcnhead-img-height: 10px; --j-mcniconnum-h5-img-width: 15px; --j-mcniconnum-h5-img-height: 15px; --j-mcniconnum-h5-size: 12px; --j-mcniconnum-h5-line: 12px; --j-mcniconnum-h6-size: 12px; --j-mcniconnum-h6-line: 12px; --j-mcnuser-h5-size: 12px; --j-mcnuser-h5-line: 12px; --j-timechart-progress-hight: 10px; --j-timechart-progress-font: 8px; --j-mcnrunstop-h4-img-width: 8px; --j-mcnrunstop-h4-img-height: 8px; --j-mcnrunstop-h4-size: 10px; --j-mcnrunstop-h4-line: 10px; --j-mcnrunstop-h4-span-size: 8px; --j-mcnrunstop-h4-span-line: 8px; --j-table-thbox-img-width: 12px; --j-table-thbox-img-height: 12px; --j-table-thbox-h6-size: 12px; --j-table-thbox-h6-line: 12px; --j-table-tbody-td-size: 12px; --j-table-tbody-td-line: 12px; --j-table-tbody-td-h6-size: 12px; --j-table-tbody-td-h6-line: 12px; --j-table-tbody-td-h5-size: 17px; --j-expiry-msg-font-size: 20px; --j-btn-font-size: calc(100% - 2px); } .grid-5-3.jacquard { --j-mcnboxes-mcnbody: calc(100vh - 74.6vh); --j-mcnhead-h4-size: 12px; --j-mcnhead-h4-line: 12px; --j-mcnhead-img-width: 10px; --j-mcnhead-img-height: 10px; --j-mcniconnum-h5-img-width: 17px; --j-mcniconnum-h5-img-height: 17px; --j-mcniconnum-h5-size: 10px; --j-mcniconnum-h5-line: 10px; --j-mcniconnum-h6-size: 10px; --j-mcniconnum-h6-line: 10px; --j-mcnuser-h5-size: 10px; --j-mcnuser-h5-line: 10px; --j-timechart-progress-hight: 15px; --j-timechart-progress-font: 10px; --j-mcnrunstop-h4-img-width: 8px; --j-mcnrunstop-h4-img-height: 8px; --j-mcnrunstop-h4-size: 10px; --j-mcnrunstop-h4-line: 10px; --j-mcnrunstop-h4-span-size: 8px; --j-mcnrunstop-h4-span-line: 8px; --j-table-thbox-img-width: 10px; --j-table-thbox-img-height: 10px; --j-table-thbox-h6-size: 10px; --j-table-thbox-h6-line: 10px; --j-table-tbody-td-size: 10px; --j-table-tbody-td-line: 10px; --j-table-tbody-td-h6-size: 10px; --j-table-tbody-td-h6-line: 10px; --j-table-tbody-td-h5-size: 15px; --j-expiry-msg-font-size: 20px; --j-btn-font-size: calc(100% - 2px); } } /* --- 1280px --- */ @media (max-width: 1280.98px) { .grid-1.jacquard { --j-mcnboxes-mcnbody: calc(100vh - 210px); --j-mcnhead-h4-size: 50px; --j-mcnhead-h4-line: 50px; --j-mcnhead-img-width: 50px; --j-mcnhead-img-height: 50px; --j-mcniconnum-h5-img-width: 50px; --j-mcniconnum-h5-img-height: 50px; --j-mcniconnum-h5-size: 40px; --j-mcniconnum-h5-line: 40px; --j-mcniconnum-h6-size: 40px; --j-mcniconnum-h6-line: 40px; --j-mcnuser-h5-size: 40px; --j-mcnuser-h5-line: 40px; --j-timechart-progress-hight: 55px; --j-timechart-progress-font: 20px; --j-mcnrunstop-h4-img-width: 40px; --j-mcnrunstop-h4-img-height: 40px; --j-mcnrunstop-h4-size: 40px; --j-mcnrunstop-h4-line: 40px; --j-mcnrunstop-h4-span-size: 40px; --j-mcnrunstop-h4-span-line: 40px; --j-table-thbox-img-width: 40px; --j-table-thbox-img-height: 40px; --j-table-thbox-h6-size: 35px; --j-table-thbox-h6-line: 35px; --j-table-tbody-td-size: 35px; --j-table-tbody-td-line: 35px; --j-table-tbody-td-h6-size: 35px; --j-table-tbody-td-h6-line: 35px; --j-table-tbody-td-h5-size: 36px; --j-expiry-msg-font-size: 60px; --j-btn-font-size: calc(100% - 20px); } .grid-2.jacquard { --j-mcnboxes-mcnbody: calc(100vh - 63vh); --j-mcnhead-h4-size: 22px; --j-mcnhead-h4-line: 22px; --j-mcnhead-img-width: 22px; --j-mcnhead-img-height: 22px; --j-mcniconnum-h5-img-width: 23px; --j-mcniconnum-h5-img-height: 23px; --j-mcniconnum-h5-size: 18px; --j-mcniconnum-h5-line: 18px; --j-mcniconnum-h6-size: 18px; --j-mcniconnum-h6-line: 18px; --j-mcnuser-h5-size: 18px; --j-mcnuser-h5-line: 18px; --j-timechart-progress-hight: 35px; --j-timechart-progress-font: 18px; --j-mcnrunstop-h4-img-width: 20px; --j-mcnrunstop-h4-img-height: 20px; --j-mcnrunstop-h4-size: 20px; --j-mcnrunstop-h4-line: 20px; --j-mcnrunstop-h4-span-size: 20px; --j-mcnrunstop-h4-span-line: 20px; --j-table-thbox-img-width: 20px; --j-table-thbox-img-height: 20px; --j-table-thbox-h6-size: 18px; --j-table-thbox-h6-line: 18px; --j-table-tbody-td-size: 18px; --j-table-tbody-td-line: 18px; --j-table-tbody-td-h6-size: 18px; --j-table-tbody-td-h6-line: 18px; --j-table-tbody-td-h5-size: 20px; --j-expiry-msg-font-size: 30px; --j-btn-font-size: calc(100% - 3px); } .grid-3.jacquard { --j-mcnboxes-mcnbody: calc(100vh - 62vh); --j-mcnhead-h4-size: 25px; --j-mcnhead-h4-line: 25px; --j-mcnhead-img-width: 20px; --j-mcnhead-img-height: 20px; --j-mcniconnum-h5-img-width: 25px; --j-mcniconnum-h5-img-height: 25px; --j-mcniconnum-h5-size: 20px; --j-mcniconnum-h5-line: 20px; --j-mcniconnum-h6-size: 20px; --j-mcniconnum-h6-line: 20px; --j-mcnuser-h5-size: 20px; --j-mcnuser-h5-line: 20px; --j-timechart-progress-hight: 30px; --j-timechart-progress-font: 14px; --j-mcnrunstop-h4-img-width: 15px; --j-mcnrunstop-h4-img-height: 15px; --j-mcnrunstop-h4-size: 20px; --j-mcnrunstop-h4-line: 20px; --j-mcnrunstop-h4-span-size: 15px; --j-mcnrunstop-h4-span-line: 15px; --j-table-thbox-img-width: 15px; --j-table-thbox-img-height: 15px; --j-table-thbox-h6-size: 15px; --j-table-thbox-h6-line: 15px; --j-table-tbody-td-size: 15px; --j-table-tbody-td-line: 15px; --j-table-tbody-td-h6-size: 15px; --j-table-tbody-td-h6-line: 15px; --j-table-tbody-td-h5-size: 18px; --j-expiry-msg-font-size: 30px; --j-btn-font-size: calc(100% - 10px); } .grid-4-2.jacquard { --j-mcnboxes-mcnbody: calc(100vh - 62vh); --j-mcnhead-h4-size: 20px; --j-mcnhead-h4-line: 20px; --j-mcnhead-img-width: 15px; --j-mcnhead-img-height: 15px; --j-mcniconnum-h5-img-width: 27px; --j-mcniconnum-h5-img-height: 27px; --j-mcniconnum-h5-size: 15px; --j-mcniconnum-h5-line: 15px; --j-mcniconnum-h6-size: 15px; --j-mcniconnum-h6-line: 15px; --j-mcnuser-h5-size: 15px; --j-mcnuser-h5-line: 15px; --j-timechart-progress-hight: 35px; --j-timechart-progress-font: 14px; --j-mcnrunstop-h4-img-width: 15px; --j-mcnrunstop-h4-img-height: 15px; --j-mcnrunstop-h4-size: 15px; --j-mcnrunstop-h4-line: 15px; --j-mcnrunstop-h4-span-size: 15px; --j-mcnrunstop-h4-span-line: 15px; --j-table-thbox-img-width: 12px; --j-table-thbox-img-height: 12px; --j-table-thbox-h6-size: 13px; --j-table-thbox-h6-line: 13px; --j-table-tbody-td-size: 12px; --j-table-tbody-td-line: 12px; --j-table-tbody-td-h6-size: 13px; --j-table-tbody-td-h6-line: 13px; --j-table-tbody-td-h5-size: 16px; --j-expiry-msg-font-size: 30px; --j-btn-font-size: calc(100% - 5px); } .grid-4-3.jacquard { --j-mcnboxes-mcnbody: calc(100vh - 74.2vh); --j-mcnhead-h4-size: 12px; --j-mcnhead-h4-line: 12px; --j-mcnhead-img-width: 12px; --j-mcnhead-img-height: 12px; --j-mcniconnum-h5-img-width: 14px; --j-mcniconnum-h5-img-height: 14px; --j-mcniconnum-h5-size: 12px; --j-mcniconnum-h5-line: 12px; --j-mcniconnum-h6-size: 12px; --j-mcniconnum-h6-line: 12px; --j-mcnuser-h5-size: 12px; --j-mcnuser-h5-line: 12px; --j-timechart-progress-hight: 20px; --j-timechart-progress-font: 14px; --j-mcnrunstop-h4-img-width: 12px; --j-mcnrunstop-h4-img-height: 12px; --j-mcnrunstop-h4-size: 12px; --j-mcnrunstop-h4-line: 12px; --j-mcnrunstop-h4-span-size: 12px; --j-mcnrunstop-h4-span-line: 12px; --j-table-thbox-img-width: 12px; --j-table-thbox-img-height: 12px; --j-table-thbox-h6-size: 12px; --j-table-thbox-h6-line: 12px; --j-table-tbody-td-size: 12px; --j-table-tbody-td-line: 12px; --j-table-tbody-td-h6-size: 12px; --j-table-tbody-td-h6-line: 12px; --j-table-tbody-td-h5-size: 15px; --j-expiry-msg-font-size: 20px; --j-btn-font-size: calc(100% - 3px); } .grid-5-3.jacquard { --j-mcnboxes-mcnbody: calc(100vh - 74.4vh); --j-mcnhead-h4-size: 12px; --j-mcnhead-h4-line: 12px; --j-mcnhead-img-width: 14px; --j-mcnhead-img-height: 14px; --j-mcniconnum-h5-img-width: 15px; --j-mcniconnum-h5-img-height: 15px; --j-mcniconnum-h5-size: 11px; --j-mcniconnum-h5-line: 11px; --j-mcniconnum-h6-size: 11px; --j-mcniconnum-h6-line: 11px; --j-mcnuser-h5-size: 11px; --j-mcnuser-h5-line: 11px; --j-timechart-progress-hight: 20px; --j-timechart-progress-font: 14px; --j-mcnrunstop-h4-img-width: 12px; --j-mcnrunstop-h4-img-height: 12px; --j-mcnrunstop-h4-size: 12px; --j-mcnrunstop-h4-line: 12px; --j-mcnrunstop-h4-span-size: 12px; --j-mcnrunstop-h4-span-line: 12px; --j-table-thbox-img-width: 8px; --j-table-thbox-img-height: 8px; --j-table-thbox-h6-size: 10px; --j-table-thbox-h6-line: 10px; --j-table-tbody-td-size: 10px; --j-table-tbody-td-line: 10px; --j-table-tbody-td-h6-size: 10px; --j-table-tbody-td-h6-line: 10px; --j-table-tbody-td-h5-size: 13px; --j-expiry-msg-font-size: 20px; --j-btn-font-size: calc(100% - 2px); } } /* --- 1199px --- */ @media (max-width: 1199.98px) { /* For resolutions below 1199, many variables share values across grids in your original code. However, to maintain full structure, they are defined per grid. */ .grid-1.jacquard, .grid-2.jacquard, .grid-3.jacquard, .grid-4-2.jacquard, .grid-4-3.jacquard, .grid-5-3.jacquard { --j-mcnboxes-mcnbody: auto; --j-mcnhead-h4-size: 12px; --j-mcnhead-h4-line: 12px; --j-mcnhead-img-width: 10px; --j-mcnhead-img-height: 10px; --j-mcniconnum-h5-img-width: 20px; --j-mcniconnum-h5-img-height: 20px; --j-mcniconnum-h5-size: 12px; --j-mcniconnum-h5-line: 12px; --j-mcniconnum-h6-size: 12px; --j-mcniconnum-h6-line: 12px; --j-mcnuser-h5-size: 12px; --j-mcnuser-h5-line: 12px; --j-timechart-progress-hight: 25px; --j-timechart-progress-font: 14px; --j-mcnrunstop-h4-img-width: 10px; --j-mcnrunstop-h4-img-height: 10px; --j-mcnrunstop-h4-size: 12px; --j-mcnrunstop-h4-line: 12px; --j-mcnrunstop-h4-span-size: 10px; --j-mcnrunstop-h4-span-line: 10px; --j-table-thbox-img-width: 10px; --j-table-thbox-img-height: 10px; /* Slight variations handled below if needed, but 1199 mostly uniform */ --j-table-thbox-h6-size: 10px; --j-table-thbox-h6-line: 10px; --j-table-tbody-td-size: 10px; --j-table-tbody-td-line: 10px; } /* Specific exceptions for 1199px based on your code */ .grid-1.jacquard, .grid-2.jacquard { --j-table-thbox-img-width: 12px; --j-table-thbox-img-height: 12px; --j-table-thbox-h6-size: 12px; --j-table-thbox-h6-line: 12px; --j-table-tbody-td-size: 12px; --j-table-tbody-td-line: 12px; } } /* --- 960px --- */ @media (max-width: 960px) { .grid-1.jacquard { --j-mcnboxes-mcnbody: calc(100vh - 196px); --j-mcnhead-h4-size: 30px; --j-mcnhead-h4-line: 30px; --j-mcnhead-img-width: 30px; --j-mcnhead-img-height: 30px; --j-mcniconnum-h5-img-width: 29px; --j-mcniconnum-h5-img-height: 29px; --j-mcniconnum-h5-size: 23px; --j-mcniconnum-h5-line: 23px; --j-mcniconnum-h6-size: 23px; --j-mcniconnum-h6-line: 23px; --j-mcnuser-h5-size: 23px; --j-mcnuser-h5-line: 23px; --j-timechart-progress-hight: 20px; --j-timechart-progress-font: 15px; --j-mcnrunstop-h4-img-width: 25px; --j-mcnrunstop-h4-img-height: 25px; --j-mcnrunstop-h4-size: 25px; --j-mcnrunstop-h4-line: 25px; --j-mcnrunstop-h4-span-size: 25px; --j-mcnrunstop-h4-span-line: 25px; --j-table-thbox-img-width: 40px; --j-table-thbox-img-height: 40px; --j-table-thbox-h6-size: 28px; --j-table-thbox-h6-line: 28px; --j-table-tbody-td-size: 28px; --j-table-tbody-td-line: 28px; --j-table-tbody-td-h6-size: 30px; --j-table-tbody-td-h6-line: 30px; --j-table-tbody-td-h5-size: 36px; --j-expiry-msg-font-size: 60px; --j-btn-font-size: calc(100% - 10px); } .grid-2.jacquard { --j-mcnboxes-mcnbody: calc(100vh - 67vh); --j-mcnhead-h4-size: 12px; --j-mcnhead-h4-line: 12px; --j-mcnhead-img-width: 12px; --j-mcnhead-img-height: 12px; --j-mcniconnum-h5-img-width: 12.5px; --j-mcniconnum-h5-img-height: 12.5px; --j-mcniconnum-h5-size: 12px; --j-mcniconnum-h5-line: 12px; --j-mcniconnum-h6-size: 12px; --j-mcniconnum-h6-line: 12px; --j-mcnuser-h5-size: 12px; --j-mcnuser-h5-line: 12px; --j-timechart-progress-hight: 12px; --j-timechart-progress-font: 10px; --j-mcnrunstop-h4-img-width: 10px; --j-mcnrunstop-h4-img-height: 10px; --j-mcnrunstop-h4-size: 10px; --j-mcnrunstop-h4-line: 10px; --j-mcnrunstop-h4-span-size: 10px; --j-mcnrunstop-h4-span-line: 10px; --j-table-thbox-img-width: 20px; --j-table-thbox-img-height: 20px; --j-table-thbox-h6-size: 12px; --j-table-thbox-h6-line: 12px; --j-table-tbody-td-size: 12px; --j-table-tbody-td-line: 12px; --j-table-tbody-td-h6-size: 12px; --j-table-tbody-td-h6-line: 12px; --j-table-tbody-td-h5-size: 18px; --j-expiry-msg-font-size: 30px; --j-btn-font-size: calc(100% - 3px); } .grid-3.jacquard { --j-mcnboxes-mcnbody: calc(100vh - 66.5vh); --j-mcnhead-h4-size: 12px; --j-mcnhead-h4-line: 12px; --j-mcnhead-img-width: 12px; --j-mcnhead-img-height: 12px; --j-mcniconnum-h5-img-width: 13px; --j-mcniconnum-h5-img-height: 13px; --j-mcniconnum-h5-size: 12px; --j-mcniconnum-h5-line: 12px; --j-mcniconnum-h6-size: 12px; --j-mcniconnum-h6-line: 12px; --j-mcnuser-h5-size: 12px; --j-mcnuser-h5-line: 12px; --j-timechart-progress-hight: 12px; --j-timechart-progress-font: 11px; --j-mcnrunstop-h4-img-width: 10px; --j-mcnrunstop-h4-img-height: 10px; --j-mcnrunstop-h4-size: 10px; --j-mcnrunstop-h4-line: 10px; --j-mcnrunstop-h4-span-size: 10px; --j-mcnrunstop-h4-span-line: 10px; --j-table-thbox-img-width: 10px; --j-table-thbox-img-height: 10px; --j-table-thbox-h6-size: 12px; --j-table-thbox-h6-line: 12px; --j-table-tbody-td-size: 12px; --j-table-tbody-td-line: 12px; --j-table-tbody-td-h6-size: 12px; --j-table-tbody-td-h6-line: 12px; --j-table-tbody-td-h5-size: 18px; --j-expiry-msg-font-size: 30px; --j-btn-font-size: calc(100% - 5px); } .grid-4-2.jacquard { --j-mcnboxes-mcnbody: calc(100vh - 66.3vh); --j-mcnhead-h4-size: 10px; --j-mcnhead-h4-line: 10px; --j-mcnhead-img-width: 10px; --j-mcnhead-img-height: 10px; --j-mcniconnum-h5-img-width: 15px; --j-mcniconnum-h5-img-height: 15px; --j-mcniconnum-h5-size: 10.5px; --j-mcniconnum-h5-line: 10.5px; --j-mcniconnum-h6-size: 10.5px; --j-mcniconnum-h6-line: 10.5px; --j-mcnuser-h5-size: 10.5px; --j-mcnuser-h5-line: 10.5px; --j-timechart-progress-hight: 12px; --j-timechart-progress-font: 10px; --j-mcnrunstop-h4-img-width: 10px; --j-mcnrunstop-h4-img-height: 10px; --j-mcnrunstop-h4-size: 10px; --j-mcnrunstop-h4-line: 10px; --j-mcnrunstop-h4-span-size: 10px; --j-mcnrunstop-h4-span-line: 10px; --j-table-thbox-img-width: 12px; --j-table-thbox-img-height: 12px; --j-table-thbox-h6-size: 8.7px; --j-table-thbox-h6-line: 8.7px; --j-table-tbody-td-size: 8.7px; --j-table-tbody-td-line: 8.7px; --j-table-tbody-td-h6-size: 8.7px; --j-table-tbody-td-h6-line: 8.7px; --j-table-tbody-td-h5-size: 16px; --j-expiry-msg-font-size: 30px; --j-btn-font-size: calc(100% - 3px); } .grid-4-3.jacquard { --j-mcnboxes-mcnbody: calc(100vh - 78vh); --j-mcnhead-h4-size: 8px; --j-mcnhead-h4-line: 8px; --j-mcnhead-img-width: 8px; --j-mcnhead-img-height: 8px; --j-mcniconnum-h5-img-width: 9px; --j-mcniconnum-h5-img-height: 9px; --j-mcniconnum-h5-size: 8px; --j-mcniconnum-h5-line: 7px; --j-mcniconnum-h6-size: 8px; --j-mcniconnum-h6-line: 7px; --j-mcnuser-h5-size: 8px; --j-mcnuser-h5-line: 7px; --j-timechart-progress-hight: 10px; --j-timechart-progress-font: 8px; --j-mcnrunstop-h4-img-width: 8px; --j-mcnrunstop-h4-img-height: 8px; --j-mcnrunstop-h4-size: 8px; --j-mcnrunstop-h4-line: 8px; --j-mcnrunstop-h4-span-size: 8px; --j-mcnrunstop-h4-span-line: 8px; --j-table-thbox-img-width: 12px; --j-table-thbox-img-height: 12px; --j-table-thbox-h6-size: 6px; --j-table-thbox-h6-line: 3px; --j-table-tbody-td-size: 6px; --j-table-tbody-td-line: 3px; --j-table-tbody-td-h6-size: 6px; --j-table-tbody-td-h6-line: 5px; --j-table-tbody-td-h5-size: 10px; --j-expiry-msg-font-size: 20px; --j-btn-font-size: calc(100% - 2px); } .grid-5-3.jacquard { --j-mcnboxes-mcnbody: calc(100vh - 78vh); --j-mcnhead-h4-size: 8px; --j-mcnhead-h4-line: 8px; --j-mcnhead-img-width: 8px; --j-mcnhead-img-height: 8px; --j-mcniconnum-h5-img-width: 8.5px; --j-mcniconnum-h5-img-height: 8.5px; --j-mcniconnum-h5-size: 7px; --j-mcniconnum-h5-line: 7px; --j-mcniconnum-h6-size: 7px; --j-mcniconnum-h6-line: 7px; --j-mcnuser-h5-size: 7px; --j-mcnuser-h5-line: 7px; --j-timechart-progress-hight: 10px; --j-timechart-progress-font: 8px; --j-mcnrunstop-h4-img-width: 7px; --j-mcnrunstop-h4-img-height: 7px; --j-mcnrunstop-h4-size: 7px; --j-mcnrunstop-h4-line: 7px; --j-mcnrunstop-h4-span-size: 7px; --j-mcnrunstop-h4-span-line: 7px; --j-table-thbox-img-width: 6.9px; --j-table-thbox-img-height: 5px; --j-table-thbox-h6-size: 6.9px; --j-table-thbox-h6-line: 5px; --j-table-tbody-td-size: 6.9px; --j-table-tbody-td-line: 5px; --j-table-tbody-td-h6-size: 6.9px; --j-table-tbody-td-h6-line: 5px; --j-table-tbody-td-h5-size: 10px; --j-expiry-msg-font-size: 20px; --j-btn-font-size: calc(100% - 2px); } }