_____ WRAPPER-MARGIN{} /* ------------------------------------------------- margin-xxs ------------------------------------------------- */ .wz.wrapper.wrmr-xxs {margin: calc(3px + (6 - 3) * ((100vw - 320px) / (1200 - 320)));} /* ------------------------------------------------- margin-top-xxs ------------------------------------------------- */ .wz.wrapper.wrmr-t-xxs {margin-top: calc(3px + (6 - 3) * ((100vw - 320px) / (1200 - 320)));} /* ------------------------------------------------- margin-bottom-xxs ------------------------------------------------- */ .wz.wrapper.wrmr-b-xxs {margin-bottom: calc(3px + (6 - 3) * ((100vw - 320px) / (1200 - 320)));} /* ------------------------------------------------- margin-left-xxs / margin-side-xxs ------------------------------------------------- */ .wz.wrapper.wrmr-l-xxs, .wz.wrapper.wrmr-s-xxs {margin-left: calc(3px + (6 - 3) * ((100vw - 320px) / (1200 - 320)));} /* ------------------------------------------------- margin-right-xxs / margin-side-xxs ------------------------------------------------- */ .wz.wrapper.wrmr-r-xxs, .wz.wrapper.wrmr-s-xxs {margin-right: calc(3px + (6 - 3) * ((100vw - 320px) / (1200 - 320)));} /* ------------------------------------------------- margin-xs ------------------------------------------------- */ .wz.wrapper.wrmr-xs {margin: calc(6px + (12 - 6) * ((100vw - 320px) / (1200 - 320)));} /* ------------------------------------------------- margin-top-xs ------------------------------------------------- */ .wz.wrapper.wrmr-t-xs {margin-top: calc(6px + (12 - 6) * ((100vw - 320px) / (1200 - 320)));} /* ------------------------------------------------- margin-bottom-xs ------------------------------------------------- */ .wz.wrapper.wrmr-b-xs {margin-bottom: calc(6px + (12 - 6) * ((100vw - 320px) / (1200 - 320)));} /* ------------------------------------------------- margin-left-xs / margin-side-xs ------------------------------------------------- */ .wz.wrapper.wrmr-l-xs, .wz.wrapper.wrmr-s-xs {margin-left: calc(6px + (12 - 6) * ((100vw - 320px) / (1200 - 320)));} /* ------------------------------------------------- margin-right-xs / margin-side-xs ------------------------------------------------- */ .wz.wrapper.wrmr-r-xs, .wz.wrapper.wrmr-s-xs {margin-right: calc(6px + (12 - 6) * ((100vw - 320px) / (1200 - 320)));} /* ------------------------------------------------- margin-sm ------------------------------------------------- */ .wz.wrapper.wrmr-sm {margin: calc(12px + (24 - 12) * ((100vw - 320px) / (1200 - 320)));} /* ------------------------------------------------- margin-top-sm ------------------------------------------------- */ .wz.wrapper.wrmr-t-sm {margin-top: calc(12px + (24 - 12) * ((100vw - 320px) / (1200 - 320)));} /* ------------------------------------------------- margin-bottom-sm ------------------------------------------------- */ .wz.wrapper.wrmr-b-sm {margin-bottom: calc(12px + (24 - 12) * ((100vw - 320px) / (1200 - 320)));} /* ------------------------------------------------- margin-left-sm / margin-side-sm ------------------------------------------------- */ .wz.wrapper.wrmr-l-sm, .wz.wrapper.wrmr-s-sm {margin-left: calc(12px + (24 - 12) * ((100vw - 320px) / (1200 - 320)));} /* ------------------------------------------------- margin-right-sm / margin-side-sm ------------------------------------------------- */ .wz.wrapper.wrmr-r-sm, .wz.wrapper.wrmr-s-sm {margin-right: calc(12px + (24 - 12) * ((100vw - 320px) / (1200 - 320)));} /* ------------------------------------------------- margin-md ------------------------------------------------- */ .wz.wrapper.wrmr-md {margin: calc(18px + (36 - 18) * ((100vw - 320px) / (1200 - 320)));} /* ------------------------------------------------- margin-top-md ------------------------------------------------- */ .wz.wrapper.wrmr-t-md {margin-top: calc(18px + (36 - 18) * ((100vw - 320px) / (1200 - 320)));} /* ------------------------------------------------- margin-bottom-md ------------------------------------------------- */ .wz.wrapper.wrmr-b-md {margin-bottom: calc(18px + (36 - 18) * ((100vw - 320px) / (1200 - 320)));} /* ------------------------------------------------- margin-left-md / margin-side-md ------------------------------------------------- */ .wz.wrapper.wrmr-l-md, .wz.wrapper.wrmr-s-md {margin-left: calc(18px + (36 - 18) * ((100vw - 320px) / (1200 - 320)));} /* ------------------------------------------------- margin-right-md / margin-side-md ------------------------------------------------- */ .wz.wrapper.wrmr-r-md, .wz.wrapper.wrmr-s-md {margin-right: calc(18px + (36 - 18) * ((100vw - 320px) / (1200 - 320)));} /* ------------------------------------------------- margin-lg ------------------------------------------------- */ .wz.wrapper.wrmr-lg {margin: calc(24px + (48 - 24) * ((100vw - 320px) / (1200 - 320)));} /* ------------------------------------------------- margin-top-lg ------------------------------------------------- */ .wz.wrapper.wrmr-t-lg {margin-top: calc(24px + (48 - 24) * ((100vw - 320px) / (1200 - 320)));} /* ------------------------------------------------- margin-bottom-lg ------------------------------------------------- */ .wz.wrapper.wrmr-b-lg {margin-bottom: calc(24px + (48 - 24) * ((100vw - 320px) / (1200 - 320)));} /* ------------------------------------------------- margin-left-lg / margin-side-lg ------------------------------------------------- */ .wz.wrapper.wrmr-l-lg, .wz.wrapper.wrmr-s-lg {margin-left: calc(24px + (48 - 24) * ((100vw - 320px) / (1200 - 320)));} /* ------------------------------------------------- margin-right-lg / margin-side-lg ------------------------------------------------- */ .wz.wrapper.wrmr-r-lg, .wz.wrapper.wrmr-s-lg {margin-right: calc(24px + (48 - 24) * ((100vw - 320px) / (1200 - 320)));} /* ------------------------------------------------- margin-xl ------------------------------------------------- */ .wz.wrapper.wrmr-xl {margin: calc(30px + (60 - 30) * ((100vw - 320px) / (1200 - 320)));} /* ------------------------------------------------- margin-top-xl ------------------------------------------------- */ .wz.wrapper.wrmr-t-xl {margin-top: calc(30px + (60 - 30) * ((100vw - 320px) / (1200 - 320)));} /* ------------------------------------------------- margin-bottom-xl ------------------------------------------------- */ .wz.wrapper.wrmr-b-xl {margin-bottom: calc(30px + (60 - 30) * ((100vw - 320px) / (1200 - 320)));} /* ------------------------------------------------- margin-left-xl / margin-side-xl ------------------------------------------------- */ .wz.wrapper.wrmr-l-xl, .wz.wrapper.wrmr-s-xl {margin-left: calc(30px + (60 - 30) * ((100vw - 320px) / (1200 - 320)));} /* ------------------------------------------------- margin-right-xl / margin-side-xl ------------------------------------------------- */ .wz.wrapper.wrmr-r-xl, .wz.wrapper.wrmr-s-xl {margin-right: calc(30px + (60 - 30) * ((100vw - 320px) / (1200 - 320)));} /* ------------------------------------------------- margin-xxl ------------------------------------------------- */ .wz.wrapper.wrmr-xxl {margin: calc(36px + (72 - 36) * ((100vw - 320px) / (1200 - 320)));} /* ------------------------------------------------- margin-top-xxl ------------------------------------------------- */ .wz.wrapper.wrmr-t-xxl {margin-top: calc(36px + (72 - 36) * ((100vw - 320px) / (1200 - 320)));} /* ------------------------------------------------- margin-bottom-xxl ------------------------------------------------- */ .wz.wrapper.wrmr-b-xxl {margin-bottom: calc(36px + (72 - 36) * ((100vw - 320px) / (1200 - 320)));} /* ------------------------------------------------- margin-left-xxl / margin-side-xxl ------------------------------------------------- */ .wz.wrapper.wrmr-l-xxl, .wz.wrapper.wrmr-s-xxl {margin-left: calc(36px + (72 - 36) * ((100vw - 320px) / (1200 - 320)));} /* ------------------------------------------------- margin-right-xxl / margin-side-xxl ------------------------------------------------- */ .wz.wrapper.wrmr-r-xxl, .wz.wrapper.wrmr-s-xxl {margin-right: calc(36px + (72 - 36) * ((100vw - 320px) / (1200 - 320)));}