/* Cookie banner ("Privacy preferences"), individual privacy settings, floating privacy button and
   click-to-load embeds. Built by public/js/cookies.js; every colour and size comes from Admin → Cookie Settings
   as --bzc-* variables on .bzc (font sizes are unitless px numbers so phones can scale them). */
.bzc {
  --bzc-bg: #fff; --bzc-color: #2b2b2b; --bzc-fs: 13; --bzc-fw: 400; --bzc-lh: 1.5; --bzc-align: left;
  --bzc-font: var(--font-body, 'Plus Jakarta Sans'), system-ui, sans-serif; --bzc-link: var(--bzc-color); --bzc-link-deco: underline;
  --bzc-bw: 0px; --bzc-bc: #fff; --bzc-shadow: 0 0 17px 0 rgba(0, 0, 0, .2); --bzc-radius: 5px; --bzc-dialog-r: 3px;
  --bzc-maxh: 500px; --bzc-maxh-m: 400px; --bzc-inner: 1024px; --bzc-inner-ind: 1980px; --bzc-dialog-w: 530px; --bzc-dialog-w-ind: 970px;
  --bzc-box-w: 420px; --bzc-btncol: 320px; --bzc-scale: 1; --bzc-scale-m: .9; --bzc-anim-d: 500ms;
  --bzc-overlay: rgba(0, 0, 0, .5); --bzc-blur: 2px; --bzc-btn-minh: 0px;
  font-family: var(--bzc-font); color: var(--bzc-color); -webkit-font-smoothing: antialiased;
}
.bzc *, .bzc *::before, .bzc *::after { box-sizing: border-box; }
.bzc [hidden] { display: none !important; }
.bzc p { margin: 0 0 10px; }
.bzc button { font-family: inherit; letter-spacing: normal; text-transform: none; }
.bzc a { transition: color .2s, background-color .2s; }

/* ---------- the panel ---------- */
.bzc-banner {
  position: fixed; z-index: 9000; display: flex; flex-direction: column;
  background: var(--bzc-bg); color: var(--bzc-color); box-shadow: var(--bzc-shadow);
  font-size: calc(var(--bzc-fs) * var(--bzc-scale) * 1px); font-weight: var(--bzc-fw); line-height: var(--bzc-lh); text-align: var(--bzc-align);
}
.bzc-banner { max-height: min(var(--bzc-maxh), calc(100vh - 16px)); }
.bzc-banner[data-view="individual"] { max-height: min(85vh, 900px); }
/* Header and footer stay in view; the body scrolls when the panel reaches its maximum height. */
.bzc-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
.bzc-banner { --bzc-inner-cur: var(--bzc-inner); }
.bzc-banner[data-view="individual"] { --bzc-inner-cur: var(--bzc-inner-ind); }
.bzc-inner { width: 100%; max-width: var(--bzc-inner-cur); margin: 0 auto; }

/* Full-width bar */
.bzc[data-layout="banner"] .bzc-banner { left: 0; right: 0; bottom: 0; border-top: var(--bzc-bw) solid var(--bzc-bc); }
.bzc[data-layout="banner"][data-pos="top"] .bzc-banner { top: 0; bottom: auto; border-top: 0; border-bottom: var(--bzc-bw) solid var(--bzc-bc); }
/* Centred dialog */
.bzc[data-layout="dialog"] .bzc-banner {
  left: 50%; top: 50%; width: calc(100% - 32px); max-width: var(--bzc-dialog-w); transform: translate(-50%, -50%);
  border: var(--bzc-bw) solid var(--bzc-bc); border-radius: var(--bzc-dialog-r); overflow: hidden;
}
.bzc[data-layout="dialog"] .bzc-banner[data-view="individual"] { max-width: var(--bzc-dialog-w-ind); }
.bzc[data-layout="dialog"] .bzc-inner, .bzc[data-layout="box"] .bzc-inner { max-width: none; }
/* Corner box */
.bzc[data-layout="box"] .bzc-banner {
  bottom: 20px; width: calc(100% - 40px); max-width: var(--bzc-box-w);
  border: var(--bzc-bw) solid var(--bzc-bc); border-radius: var(--bzc-dialog-r); overflow: hidden;
}
.bzc[data-layout="box"][data-pos="bottom-right"] .bzc-banner { right: 20px; }
.bzc[data-layout="box"][data-pos="bottom-left"] .bzc-banner { left: 20px; }
.bzc[data-layout="box"] .bzc-banner[data-view="individual"] { max-width: min(640px, calc(100% - 40px)); }

.bzc-overlay {
  position: fixed; inset: 0; z-index: 8990; background: var(--bzc-overlay);
  -webkit-backdrop-filter: blur(var(--bzc-blur)); backdrop-filter: blur(var(--bzc-blur));
}

/* ---------- header ---------- */
.bzc-header { flex-shrink: 0; background: var(--bzc-h-bg, transparent); border-bottom: var(--bzc-h-bw, 1px) solid var(--bzc-h-bc, #efefef); }
.bzc-header .bzc-inner { display: flex; align-items: center; min-width: 0; padding: var(--bzc-h-pad, 10px 20px 15px 0); }
/* The logo lines up with the text once the bar fills the whole screen width (the saved left padding can be 0). */
.bzc[data-layout="banner"] .bzc-header .bzc-inner {
  padding-left: max(var(--bzc-h-pl, 0px), min(var(--bzc-b-pl, 20px), calc(var(--bzc-b-pl, 20px) - (100vw - var(--bzc-inner-cur)) / 2)));
  padding-right: max(var(--bzc-h-pr, 20px), min(var(--bzc-b-pl, 20px), calc(var(--bzc-b-pl, 20px) - (100vw - var(--bzc-inner-cur)) / 2)));
}
.bzc[data-layout="dialog"] .bzc-header .bzc-inner, .bzc[data-layout="box"] .bzc-header .bzc-inner { padding-left: max(var(--bzc-h-pl, 0px), var(--bzc-b-pl, 20px)); }
.bzc-logo { display: block; flex-shrink: 0; width: auto; max-width: 40%; height: auto; max-height: calc(var(--bzc-logo-h, 53) * 1px); margin: var(--bzc-logo-m, 5px 15px 5px 0); }
.bzc-headline {
  margin: 0; min-width: 0; font-family: var(--bzc-h-font, inherit); font-size: calc(var(--bzc-h-fs, 20) * var(--bzc-scale) * 1px);
  font-weight: var(--bzc-h-fw, 400); line-height: 1.3; color: var(--bzc-h-color, inherit); letter-spacing: normal; text-transform: none; overflow-wrap: anywhere;
}

/* ---------- body ---------- */
.bzc-body .bzc-inner { padding: var(--bzc-b-pad, 15px 20px 5px 20px); }
.bzc-cols { display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px 24px; }
.bzc-desc { font-size: calc(var(--bzc-d-fs, var(--bzc-fs)) * var(--bzc-scale) * 1px); overflow-wrap: break-word; }
.bzc-desc p:last-child { margin-bottom: 10px; }
.bzc-banner a:not(.bzc-btn) { color: var(--bzc-link); text-decoration: var(--bzc-link-deco); text-underline-offset: 2px; }
.bzc-banner a:not(.bzc-btn):hover { opacity: .75; }
.bzc-teach { text-align: var(--bzc-align); }
.bzc-sep { display: block; width: calc(var(--bzc-sep-w, 50) * 1px); max-width: 100%; height: calc(var(--bzc-sep-h, 1) * 1px); margin: 5px 0 10px; border: 0; background: var(--bzc-sep-c, #969696); }
.bzc-teach p { font-size: calc(var(--bzc-t-fs, 12) * var(--bzc-scale) * 1px); color: var(--bzc-t-color, #757575); }
.bzc sup { font-size: .72em; line-height: 0; vertical-align: super; color: var(--bzc-sup, inherit); }

/* ---------- buttons ---------- */
.bzc-actions { display: flex; flex-direction: column; gap: 10px; padding-bottom: 10px; }
.bzc-btn {
  display: flex; align-items: center; justify-content: center; width: 100%; min-height: var(--bzc-btn-minh); margin: 0;
  border-style: solid; border-radius: var(--bzc-radius); cursor: pointer; text-align: center; text-decoration: none; line-height: 1.5;
  transition: background-color .2s, color .2s, border-color .2s; -webkit-tap-highlight-color: transparent; overflow-wrap: anywhere;
}
.bzc-btn[data-k="aa"] { padding: var(--bzc-aa-pad); background: var(--bzc-aa-bg); color: var(--bzc-aa-c); border-width: var(--bzc-aa-bw); border-color: var(--bzc-aa-bc); font-size: calc(var(--bzc-aa-fs) * var(--bzc-scale) * 1px); font-weight: var(--bzc-aa-fw); }
.bzc-btn[data-k="aa"]:hover { background: var(--bzc-aa-hbg); color: var(--bzc-aa-hc); border-color: var(--bzc-aa-hbc); }
.bzc-btn[data-k="ae"] { padding: var(--bzc-ae-pad); background: var(--bzc-ae-bg); color: var(--bzc-ae-c); border-width: var(--bzc-ae-bw); border-color: var(--bzc-ae-bc); font-size: calc(var(--bzc-ae-fs) * var(--bzc-scale) * 1px); font-weight: var(--bzc-ae-fw); }
.bzc-btn[data-k="ae"]:hover { background: var(--bzc-ae-hbg); color: var(--bzc-ae-hc); border-color: var(--bzc-ae-hbc); }
.bzc-btn[data-k="sv"] { padding: var(--bzc-sv-pad); background: var(--bzc-sv-bg); color: var(--bzc-sv-c); border-width: var(--bzc-sv-bw); border-color: var(--bzc-sv-bc); font-size: calc(var(--bzc-sv-fs) * var(--bzc-scale) * 1px); font-weight: var(--bzc-sv-fw); }
.bzc-btn[data-k="sv"]:hover { background: var(--bzc-sv-hbg); color: var(--bzc-sv-hc); border-color: var(--bzc-sv-hbc); }
.bzc-btn[data-k="ai"] { padding: var(--bzc-ai-pad); background: var(--bzc-ai-bg); color: var(--bzc-ai-c); border-width: var(--bzc-ai-bw); border-color: var(--bzc-ai-bc); font-size: calc(var(--bzc-ai-fs) * var(--bzc-scale) * 1px); font-weight: var(--bzc-ai-fw); }
.bzc-btn[data-k="ai"]:hover { background: var(--bzc-ai-hbg); color: var(--bzc-ai-hc); border-color: var(--bzc-ai-hbc); }
/* "link" style: plain underlined text */
.bzc-btn.bzc-as-link { min-height: 0; border-width: 0 !important; background: transparent !important; text-decoration: underline; text-underline-offset: 3px; }
.bzc-btn.bzc-as-link[data-k="ai"] { background: var(--bzc-ai-bg) !important; }
.bzc-btn.bzc-as-link[data-k="aa"], .bzc-btn.bzc-as-link[data-k="ae"] { color: var(--bzc-link); font-size: calc(var(--bzc-fs) * var(--bzc-scale) * 1px); }
.bzc-btn:focus-visible, .bzc a:focus-visible, .bzc-check:focus-visible, .bzc-more:focus-visible, .bzc-sticky:focus-visible, .bzc-menu button:focus-visible {
  outline: 2px solid #15779b; outline-offset: 2px;
}

/* ---------- footer ---------- */
.bzc-footer { flex-shrink: 0; background: var(--bzc-f-bg, #fcfcfc); border-top: var(--bzc-f-bw, 1px) solid var(--bzc-f-bc, #efefef); }
.bzc-footer .bzc-inner { padding: var(--bzc-f-pad, 10px 20px 12px 20px); font-size: calc(var(--bzc-f-fs, 14) * var(--bzc-scale) * 1px); color: var(--bzc-f-c, #757474); text-align: var(--bzc-f-align, left); line-height: 1.5; }
.bzc-banner .bzc-footer a:not(.bzc-btn) { color: var(--bzc-f-c, #757474); text-decoration: underline; }
.bzc-banner .bzc-footer a:not(.bzc-btn):hover { color: var(--bzc-f-hc, #2b2b2b); opacity: 1; }
.bzc-footer-sep { margin: 0 8px; opacity: .6; }

/* ---------- individual privacy settings ---------- */
.bzc-ind-desc { text-align: var(--bzc-ind-align, left); }
.bzc-groups { display: grid; gap: calc(var(--bzc-g-gap, 10) * 1px); margin: 4px 0 12px; }
.bzc-group {
  padding: var(--bzc-g-pad, 15px); background: var(--bzc-g-bg, transparent); border: var(--bzc-g-bw, 1px) solid var(--bzc-g-bc, #f4f4f4);
  border-radius: var(--bzc-g-r, 5px); text-align: left;
}
.bzc-group-head { display: flex; align-items: center; gap: 10px; margin: 0; cursor: pointer; }
.bzc-group-head.is-required { cursor: default; }
.bzc-group-name { font-size: calc(var(--bzc-g-h-fs, 16) * var(--bzc-scale) * 1px); font-weight: var(--bzc-g-h-fw, 400); color: var(--bzc-g-h-c, #2b2b2b); line-height: 1.35; }
.bzc-group-count { opacity: .6; }
.bzc-always { margin-left: auto; font-size: calc(12 * var(--bzc-scale) * 1px); color: var(--bzc-g-d-c, #757575); white-space: nowrap; }
.bzc-group-desc { margin: 6px 0 4px !important; font-size: calc(var(--bzc-g-d-fs, 14) * var(--bzc-scale) * 1px); color: var(--bzc-g-d-c, #757575); line-height: 1.5; }
.bzc-more {
  padding: 2px 0; border: 0; background: none; cursor: pointer; font-size: calc(var(--bzc-g-d-fs, 14) * var(--bzc-scale) * 1px);
  color: var(--bzc-g-l, #757575); text-decoration: underline; text-underline-offset: 2px;
}
.bzc-more:hover { color: var(--bzc-g-lh, #2b2b2b); }
.bzc-services { display: grid; gap: 8px; margin-top: 10px; }
.bzc-service { padding: 10px 12px; border: 1px solid var(--bzc-g-bc, #f4f4f4); border-radius: var(--bzc-g-r, 5px); background: rgba(127, 127, 127, .06); }
.bzc-service-name { font-weight: 600; color: var(--bzc-g-h-c, #2b2b2b); font-size: calc(14 * var(--bzc-scale) * 1px); }
.bzc-service dl { display: grid; grid-template-columns: minmax(90px, 150px) minmax(0, 1fr); gap: 4px 12px; margin: 8px 0 0; font-size: calc(13 * var(--bzc-scale) * 1px); color: var(--bzc-g-d-c, #757575); }
.bzc-service dt { font-weight: 600; color: var(--bzc-g-h-c, #2b2b2b); }
.bzc-service dd { margin: 0; overflow-wrap: anywhere; }
.bzc-service ul { margin: 0; padding-left: 16px; }
.bzc-service li { margin: 0 0 4px; }
.bzc-service code { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: .95em; }

/* group checkbox (square, as in the old banner) or switch */
.bzc-check {
  -webkit-appearance: none; appearance: none; position: relative; flex-shrink: 0; width: 20px; height: 20px; margin: 0;
  background: var(--bzc-cb-bg, #f0f0f0); border: var(--bzc-cb-bw, 1px) solid var(--bzc-cb-bc, #d2d2d2); border-radius: 3px; cursor: pointer;
  transition: background-color .2s, border-color .2s;
}
.bzc-check:checked { background: var(--bzc-cb-abg, #0a0101); border-color: var(--bzc-cb-abc, #0a0000); }
.bzc-check:checked::after {
  content: ""; position: absolute; left: 6px; top: 2px; width: 5px; height: 10px;
  border: solid var(--bzc-cb-ac, #fff); border-width: 0 2px 2px 0; transform: rotate(45deg);
}
.bzc-check:disabled { cursor: default; opacity: .75; }
.bzc-check.is-switch { width: 38px; height: 22px; border-radius: 11px; }
.bzc-check.is-switch::after, .bzc-check.is-switch:checked::after {
  content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border: 0; border-radius: 50%; transform: none;
  background: var(--bzc-cb-bc, #d2d2d2); transition: transform .25s cubic-bezier(.2, .7, .2, 1), background-color .2s;
}
.bzc-check.is-switch:checked::after { transform: translateX(16px); background: var(--bzc-cb-ac, #fff); }

/* ---------- floating privacy button ---------- */
.bzc-sticky {
  position: fixed; z-index: 8980; bottom: var(--bzc-s-b, 20px); display: flex; align-items: center; justify-content: center;
  padding: var(--bzc-s-pad, 15px); background: var(--bzc-s-bg, #15779b); color: var(--bzc-s-ic, #fff);
  border: var(--bzc-s-bw, 0px) solid var(--bzc-s-bc, #10556f); border-radius: var(--bzc-s-r, 50%); box-shadow: var(--bzc-s-shadow, none);
  cursor: pointer; transition: background-color .2s, color .2s, border-color .2s, transform .2s; animation: bzc-fade .4s ease both;
}
.bzc-sticky:hover, .bzc-sticky[aria-expanded="true"] { background: var(--bzc-s-hbg, #fff); color: var(--bzc-s-hic, #000); border-color: var(--bzc-s-hbc, #000); }
.bzc-sticky svg { display: block; width: calc(var(--bzc-s-is, 30) * 1px); height: calc(var(--bzc-s-is, 30) * 1px); fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.bzc-sticky.is-left { left: var(--bzc-s-side, 20px); }
.bzc-sticky.is-right { right: var(--bzc-s-side, 20px); }
.bzc-menu {
  position: fixed; z-index: 8985; bottom: calc(var(--bzc-s-b, 20px) + var(--bzc-s-is, 30) * 1px + 2 * var(--bzc-s-pad, 15px) + 12px);
  min-width: 230px; max-width: calc(100vw - 32px); padding: 6px; background: #fff; color: #2b2b2b;
  border-radius: calc(var(--bzc-s-mr, 5) * 1px); box-shadow: 0 6px 30px rgba(0, 0, 0, .25); font-size: calc(var(--bzc-s-mfs, 16) * var(--bzc-scale) * 1px);
  animation: bzc-fade .2s ease both;
}
.bzc-menu.is-left { left: var(--bzc-s-side, 20px); }
.bzc-menu.is-right { right: var(--bzc-s-side, 20px); }
.bzc-menu button { display: block; width: 100%; padding: 8px 10px; border: 0; border-radius: 4px; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.bzc-menu button:hover { background: #f2f2f2; }
.bzc-menu-id { padding: 6px 10px 4px; font-size: 11px; color: #757575; overflow-wrap: anywhere; border-top: 1px solid #efefef; margin-top: 4px; }

/* ---------- animations ---------- */
.bzc-banner.bzc-anim-slideInUp { animation: bzc-up var(--bzc-anim-d) cubic-bezier(.2, .7, .2, 1) both; }
.bzc[data-pos="top"] .bzc-banner.bzc-anim-slideInUp { animation-name: bzc-down; }
.bzc-banner.bzc-anim-fadeIn { animation: bzc-fade var(--bzc-anim-d) ease both; }
.bzc[data-layout="dialog"] .bzc-banner.bzc-anim-slideInUp { animation-name: bzc-dialog-up; }
.bzc-overlay { animation: bzc-fade .3s ease both; }
@keyframes bzc-up { from { transform: translateY(100%); } to { transform: none; } }
@keyframes bzc-down { from { transform: translateY(-100%); } to { transform: none; } }
@keyframes bzc-dialog-up { from { opacity: 0; transform: translate(-50%, -40%); } to { opacity: 1; transform: translate(-50%, -50%); } }
@keyframes bzc-fade { from { opacity: 0; } to { opacity: 1; } }

/* ---------- desktop bar: text left, buttons right ---------- */
@media (min-width: 900px) {
  .bzc[data-layout="banner"] .bzc-cols { grid-template-columns: minmax(0, 1fr) var(--bzc-btncol); }
  .bzc[data-layout="banner"] .bzc-actions { align-self: start; position: sticky; top: 0; }
}
/* Stacked layouts: the buttons stay visible at the bottom while the text scrolls. */
@media (max-width: 899px) {
  .bzc-actions { position: sticky; bottom: 0; z-index: 1; padding-top: 10px; background: var(--bzc-bg); box-shadow: 0 -10px 12px -10px rgba(0, 0, 0, .18); }
}
.bzc[data-layout="dialog"] .bzc-actions, .bzc[data-layout="box"] .bzc-actions {
  position: sticky; bottom: 0; z-index: 1; padding-top: 10px; background: var(--bzc-bg); box-shadow: 0 -10px 12px -10px rgba(0, 0, 0, .18);
}
/* ---------- tablets: the two main buttons side by side ---------- */
@media (min-width: 600px) and (max-width: 899px) {
  .bzc[data-layout="banner"] .bzc-actions, .bzc[data-layout="dialog"] .bzc-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bzc[data-layout="banner"] .bzc-actions > .bzc-as-link, .bzc[data-layout="banner"] .bzc-actions > [data-k="ai"],
  .bzc[data-layout="dialog"] .bzc-actions > .bzc-as-link, .bzc[data-layout="dialog"] .bzc-actions > [data-k="ai"] { grid-column: 1 / -1; }
  .bzc[data-layout] .bzc-actions > .bzc-btn:only-of-type { grid-column: 1 / -1; }
}
/* ---------- phones ---------- */
@media (max-width: 599px) {
  .bzc { --bzc-scale: var(--bzc-scale-m); }
  .bzc-banner { max-height: min(var(--bzc-maxh-m), calc(100vh - 24px)); }
  .bzc-banner[data-view="individual"] { max-height: calc(100vh - 24px); }
  .bzc[data-layout="box"] .bzc-banner { left: 0 !important; right: 0 !important; bottom: 0; width: auto; max-width: none !important; border-radius: 0; border-width: 0; }
  .bzc[data-layout="dialog"] .bzc-banner { width: calc(100% - 24px); }
  .bzc[data-layout] .bzc-header .bzc-inner { padding: var(--bzc-h-pad-m, 10px 16px 12px 16px); }
  .bzc-body .bzc-inner { padding: var(--bzc-b-pad-m, 12px 16px 4px 16px); }
  .bzc-footer .bzc-inner { padding: var(--bzc-f-pad-m, 10px 16px 12px 16px); }
  .bzc-logo { max-height: calc(var(--bzc-logo-h, 53) * .8px); }
  .bzc-banner.bzc-hide-header-m .bzc-header { display: none; }
  .bzc-service dl { grid-template-columns: minmax(0, 1fr); }
  .bzc-service dt { margin-top: 4px; }
  .bzc-sticky { bottom: 14px; }
  .bzc-sticky.is-left { left: 14px; } .bzc-sticky.is-right { right: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .bzc-banner, .bzc-overlay, .bzc-sticky, .bzc-menu { animation: none !important; }
}

/* ---------- click-to-load placeholder for YouTube / Vimeo (views/sections/video.ejs) ---------- */
.consent-embed {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 24px; overflow: hidden;
  text-align: center; background: #050505 radial-gradient(circle at center, #161616 0%, #050505 70%);
}
.ce-thumb { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; opacity: .3; }
.ce-box { position: relative; max-width: 480px; }
.ce-box::before {
  content: ""; display: block; width: 64px; height: 64px; margin: 0 auto 18px; border: 1px solid #fff; border-radius: 50%;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 6.5v11l9-5.5z' fill='%23fff'/%3E%3C/svg%3E") center / 24px no-repeat;
}
.ce-text { margin: 0 0 18px; font-size: 14px; font-weight: 300; line-height: 1.6; color: #cfcfcf; }
.ce-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px 18px; }
.ce-always { padding: 8px 2px; border: 0; background: none; color: #fff; cursor: pointer; font: 500 13px var(--font-body, sans-serif); text-decoration: underline; text-underline-offset: 4px; }
@media (max-width: 600px) { .ce-box::before { width: 48px; height: 48px; margin-bottom: 10px; } .ce-text { font-size: 12px; margin-bottom: 10px; } }