/* 排版：标题和短文字不留只有几个字的末行；内容和右侧联系栏之间各种宽度都留 32px。所有页面共用。 */

/* 标题：换行时各行长度接近，不出现只有一两个字的末行；标题不用连字符断词，长词放不下时由 typeset.js 处理 */
h1, h2, h3, h4, h5, h6 { text-wrap: balance !important; hyphens: manual !important; }
/* 正文：每行排到头再换行（第十轮）。不用 pretty，它为了末行长一点会让前面几行提前换行；末行只剩一两个字时由 typeset.js 把这段收窄一点 */
:is(p, li, dd, dt, figcaption, blockquote, td, th, [style*="text-wrap:pretty"], [style*="text-wrap: pretty"]):not(h1, h2, h3, h4, h5, h6) { text-wrap-style: auto !important; }

/* 中文标题只在标点和空格处换行，词不拆开；一段放不下时再从中间断开 */
:lang(zh) :is(h1, h2, h3, h4, h5, h6) { word-break: keep-all; overflow-wrap: anywhere; }

/* 韩文按词换行；长词只在放不下时才断开 */
:lang(ko) { word-break: keep-all; overflow-wrap: break-word; }

/* 右侧联系栏宽 60px，内容和联系栏之间留 32px，各种宽度都一样：
   - 窗口 1624px 以下：内容区最宽 1520px 并居中，联系栏会压到内容时右边留白加大，最多 92px；
   - 窗口 1624–1944px：内容区跟着窗口加宽，左右留白一样宽（各 92px），右边的留白正好放下联系栏；
   - 窗口更宽：内容区最宽 1840px 不再加宽，联系栏跟着内容往里移（见下面 1945px 以上的规则）。 */
@media (min-width: 761px) {
  [style*="max-width:1520px"],
  [style*="max-width: 1520px"] {
    max-width: clamp(1520px, calc(100vw - 104px), 1840px) !important;
  }
  [style*="max-width:1520px"]:not([data-headerbar]),
  [style*="max-width: 1520px"]:not([data-headerbar]) {
    padding-right: max(clamp(16px, 3vw, 40px), calc(92px - max(0px, (100vw - 1520px) / 2))) !important;
  }
}
@media (min-width: 1945px) {
  .jsk-rail { right: calc((100vw - 1840px) / 2 - 52px) !important; }
  .jsk-panel { right: calc((100vw - 1840px) / 2 + 16px) !important; }
  .backtop a { right: calc((100vw - 1840px) / 2 - 20px) !important; }
  html [data-railpad] { padding-right: calc((100vw - 1840px) / 2 + 8px) !important; }
  html:not([dir="rtl"]) [data-bleed] figcaption { max-width: calc(100% - 36px - (100vw - 1840px) / 2) !important; }
}

/* 首页通栏的产品卡片一直排到窗口右边，电脑端给右侧联系栏让出位置 */
@media (min-width: 761px) {
  [data-railpad] { padding-right: 60px !important; }
}

/* 关于我们：荣誉 46 张、专利证书 18 张。每行张数按窗口宽度固定，最后一行不会只剩一张 */
[data-honours] { grid-template-columns: repeat(8, minmax(0, 1fr)) !important; }
[data-patents] { grid-template-columns: repeat(9, minmax(0, 1fr)) !important; }
@media (max-width: 1359px) {
  [data-honours], [data-patents] { grid-template-columns: repeat(6, minmax(0, 1fr)) !important; }
}
@media (max-width: 1079px) {
  [data-honours] { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
}
@media (max-width: 859px) {
  [data-patents] { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
}
@media (max-width: 699px) {
  [data-honours] { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}
/* 第九轮：中文、韩语以外的语言，荣誉名称长，1360–1699px 宽度下八张一行时图注一行只放得下十几个字母，改为六张一行（46 张，最后一行 4 张） */
@media (min-width: 1360px) and (max-width: 1699px) {
  html:not(:lang(zh)):not(:lang(ko)) [data-honours] { grid-template-columns: repeat(6, minmax(0, 1fr)) !important; }
}

/* 长单词（德语、荷兰语、北欧语言等的复合词）在窄格子里断开，不伸出格子 */
body { overflow-wrap: break-word; }
figcaption, label, [data-exrow] * { overflow-wrap: anywhere; hyphens: auto; }

/* 表单里两列一行的输入框：单数个时最后一个占满一行，不单独缩在左边 */
form [data-grid2] > :last-child:nth-child(odd) { grid-column: 1 / -1; }

/* 手机端编号块：编号和标题一行（[data-numrow]），下面的说明占满整行，不挤在标题右边 */
[data-numcell] > [data-numrow], [data-numcell] > [data-numrow] ~ * { grid-column: 1 / -1; }

/* 首页"核心技术"旁边的通栏图片：一直铺到窗口边（右侧为联系栏多留白时也一样）；从右到左的语言里铺到左边，不压文字 */
@media (min-width: 901px) {
  [data-bleed] {
    margin-right: calc(-1 * (max(0px, (100vw - clamp(1520px, 100vw - 104px, 1840px)) / 2) + max(clamp(16px, 3vw, 40px), calc(92px - max(0px, (100vw - 1520px) / 2))))) !important;
  }
  html[dir="rtl"] [data-bleed] {
    margin-right: calc(-1 * clamp(18px, 2.4vw, 34px)) !important;
    margin-left: calc(-1 * (max(0px, (100vw - clamp(1520px, 100vw - 104px, 1840px)) / 2) + clamp(16px, 3vw, 40px))) !important;
  }
  /* 图片铺到右边时，图注最宽到联系栏左边为止，长图注在这个宽度内换行 */
  html:not([dir="rtl"]) [data-bleed] figcaption { max-width: calc(100% - 88px) !important; }
}

/* 404 页：内容区最宽 1100px，窗口较窄时同样给右侧联系栏留空 */
@media (min-width: 761px) {
  .wrap[role="main"] { padding-right: max(clamp(16px, 3vw, 40px), calc(92px - max(0px, (100vw - 1100px) / 2))) !important; }
}

/* 产品线页"拆一个例子"：手机上六格改成三格两行，单词不再被挤断 */
@media (max-width: 620px) {
  [data-exgrid] { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; row-gap: 14px !important; }
}

/* 无人叉车、潜伏式 AGV 的六款机型卡：平板宽度改为两列，尺寸和单位不再折行 */
@media (min-width: 621px) and (max-width: 1000px) {
  [data-grid3]:has(> article) { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}

/* 行业资料各专题页的"其他专题"4 张卡片：电脑端一行 4 张，平板两行各 2 张，手机一列 */
[data-cardgrid]:not([data-grid4]) { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
@media (max-width: 1000px) {
  [data-cardgrid]:not([data-grid4]) { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}
@media (max-width: 620px) {
  [data-cardgrid]:not([data-grid4]) { grid-template-columns: minmax(0, 1fr) !important; }
}
/* 行业资料首页 5 个专题：两列时最后一张占满一行 */
@media (min-width: 621px) and (max-width: 900px) {
  [data-cardgrid][data-grid4] > :last-child:nth-child(odd) { grid-column: 1 / -1; }
}

/* 手机端数字条：数字和说明放不下一行时，说明换到数字下面，数字本身不折行 */
@media (max-width: 760px) {
  [data-statrow] > div { flex-wrap: wrap; }
  [data-statrow] > div > div:first-child { white-space: nowrap; }
}

/* 搬车机器人页首屏：第三个链接（去立体车库页）做成文字链接，三个入口更容易排在一行；手机上两个按钮各占一行 */
main a[href="smart-parking-garage.html"][style*="padding:12px 20px"],
main a[href="smart-parking-garage.html"][style*="padding: 12px 20px"] {
  border-color: transparent !important; padding-left: 4px !important; padding-right: 4px !important;
}
@media (max-width: 620px) {
  main a[href="#inquiry"][style*="padding:12px 20px"], main a[href="#inquiry"][style*="padding: 12px 20px"],
  main a[href="#compat"][style*="padding:12px 20px"], main a[href="#compat"][style*="padding: 12px 20px"] {
    flex: 1 1 100%; text-align: center; white-space: normal !important;
  }
}

/* 404 页的产品列表：手机上名称和型号放不下一行时，型号换到下一行，不被挤成两截 */
.wrap[role="main"] .links a { flex-wrap: wrap; row-gap: 2px; }

/* 并排两栏一栏短一截（[data-fillcol]）：这一栏里的列表（[data-fillrows]）把各行拉开，两栏底部对齐；平板和手机上两栏上下排，不拉 */
@media (min-width: 901px) {
  [data-fillcol] { display: flex; flex-direction: column; }
  [data-fillcol] > a { align-self: flex-start; }
  [data-fillcol] > [data-fillrows] { flex: 1 1 auto; display: flex; flex-direction: column; }
  [data-fillcol] > [data-fillrows] > div { flex: 1 1 auto; align-content: center; }
  [data-fillcol] > [data-fillrows] > div[style*="display:flex"], [data-fillcol] > [data-fillrows] > div[style*="display: flex"] { align-items: center !important; }
}

/* 投资价值页"影响每年开支的部件更换周期"：宽屏上两列 */
@media (min-width: 1100px) {
  [data-fillcol] > [data-fillrows][data-cols2] { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(20px, 2.6vw, 36px); }
  [data-fillcol] > [data-fillrows][data-cols2] > div { align-content: start; }
}

/* 立体车库页"建成以后的收入和相关政策"：放在安全、适用项目两栏下面，电脑端两段并排 */
@media (min-width: 901px) {
  [data-policyrow] { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(24px, 4vw, 56px); }
  [data-policyrow] > h3 { grid-column: 1 / -1; }
}

/* 产品线页"拆一个例子"放进左栏：六格排成三列两行 */
[data-exrow][data-incol] { margin-top: clamp(18px, 2.4vw, 28px) !important; }
[data-exrow][data-incol] [data-exgrid] { flex-basis: 100% !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; row-gap: 14px !important; }

/* 产品线页调度系统的功能列表：宽屏上排成两列 */
@media (min-width: 1100px) {
  [data-feat2] { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(20px, 2.6vw, 36px); align-content: start; }
  [data-feat2] > div { grid-template-columns: minmax(0, 1fr) !important; row-gap: 4px !important; align-content: start; }
  /* 左栏更高时，两列的各行一起拉高，和左栏一起结束 */
  [data-fillcol] > [data-fillrows][data-feat2] { display: grid; align-content: stretch; }
  [data-fillcol] > [data-fillrows][data-feat2] > div { align-content: start; }
}

/* 无人叉车、潜伏式 AGV 的适用场景：宽屏上三列 */
@media (min-width: 1280px) {
  [data-usecases] { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
}

/* 行业资料首页 5 个专题：电脑端第一行 3 个、第二行 2 个加宽，不空一格 */
@media (min-width: 901px) {
  [data-cardgrid][data-grid4]:has(> a:nth-child(5):last-child) { grid-template-columns: repeat(6, minmax(0, 1fr)) !important; }
  [data-cardgrid][data-grid4]:has(> a:nth-child(5):last-child) > a { grid-column: span 2; }
  [data-cardgrid][data-grid4]:has(> a:nth-child(5):last-child) > a:nth-child(n+4) { grid-column: span 3; }
}

/* 行业方案页各行业：平板宽度下"行业特点"和"我们的做法"左右并排，不都挤在左边 */
/* （页面自己的样式在后面加载，这里多写一层 article 让规则更具体） */
@media (min-width: 761px) and (max-width: 1240px) {
  article[data-rows] { grid-template-columns: auto minmax(0, 1fr) minmax(0, 1fr) !important; }
  article[data-rows] > :nth-child(3) { grid-column: 2 / -1 !important; }
  article[data-rows] > :nth-child(4) { grid-column: 2 / 3 !important; padding-top: 6px; }
  article[data-rows] > :nth-child(5) { grid-column: 3 / 4 !important; padding-top: 6px; }
}

/* 无人叉车、潜伏式 AGV 的"产品定位 / 适用场景"：电脑和平板上改为上下排，适用场景三列，两边不留一大块空白 */
@media (min-width: 901px) {
  [data-posgrid] { grid-template-columns: minmax(0, 1fr) !important; row-gap: clamp(20px, 2.6vw, 32px); }
  [data-posgrid] > * { border-right: 0 !important; padding-right: 0 !important; padding-left: 0 !important; }
  [data-posgrid] > * + * { border-top: 2px solid rgba(32, 30, 29, .4); padding-top: clamp(20px, 2.6vw, 32px) !important; }
  [data-posgrid] [data-usecases] { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
  [data-posgrid] > :first-child p { max-width: 46em; }
}

/* 首页安全一段的三栏：三条说明长短不一，三栏并排时字少的一栏下面空得多；电脑和平板上改成一项一行，标题在左、说明在右 */
@media (min-width: 621px) {
  #safety [data-grid3] { grid-template-columns: minmax(0, 1fr) !important; }
  #safety [data-grid3] > * { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); column-gap: clamp(20px, 3vw, 32px); align-items: start; border-right: 0 !important; padding: clamp(18px, 2.6vw, 26px) 0 !important; }
  #safety [data-grid3] > * + * { border-top: 2px solid rgba(243, 242, 242, .5); }
  #safety [data-grid3] > * > p { max-width: 46em !important; }
}
/* 安全一段的编号和标题：各种宽度都排一行（手机上原来放不下时标题掉到编号下面，同一组里有的一行、有的两行），标题长了在编号右边折行 */
#safety [data-grid3] > * > div:first-child { display: grid !important; grid-template-columns: auto minmax(0, 1fr); column-gap: 12px !important; align-items: baseline !important; }

/* 四张一排的编号卡片（投资价值页、渠道合作页、潜伏式 AGV 页）：1100px 以下每张太窄，字多的和字少的差得多；和平板一样两张一排 */
@media (min-width: 901px) and (max-width: 1100px) {
  [data-grid4]:has(> [data-numcell]) { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}

/* 立体车库视频的字幕：由浏览器按文字画出来，放大也清楚 */
video::cue { font-family: Archivo, "PingFang SC", "Microsoft YaHei", "Noto Sans", system-ui, sans-serif; font-size: clamp(13px, 1.35vw, 24px); line-height: 1.35; color: #f3f2f2; background: rgba(32, 30, 29, .78); }
video::-webkit-media-text-track-display { font-size: clamp(13px, 1.35vw, 24px) !important; line-height: 1.35 !important; }

/* 关于我们页"专利、资质和荣誉"的 8 项：奖项和资质名称长的语言，窗口窄于 1440px 时四个一排太挤、要折很多行，改为两个一排 */
@media (min-width: 901px) and (max-width: 1440px) {
  html:not(:lang(zh)):not(:lang(ko)) [data-quals] { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}

/* 页脚四栏：平板宽度下每栏太窄，长一点的链接名（如俄语"潜伏式 AGV"）最后一个词会单独挤到下一行；改为两栏两行 */
@media (min-width: 621px) and (max-width: 900px) {
  [data-footer] { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}

/* 行业资料的文章页：窗口窄于 1100px 时正文一栏太窄（多列的表格挤成好几行），右边"本专题其他文章"又短、下面空一大块；
   改为和平板一样上下排，正文和表格用满整行 */
@media (min-width: 901px) and (max-width: 1100px) {
  main > article > [data-stack] { grid-template-columns: minmax(0, 1fr) !important; row-gap: 10px; }
}

/* 立体车库页"04 / 设备"的 6 张卡片：平板宽度下三张一排每张太窄，标题要折三行，改为两张一排 */
@media (min-width: 621px) and (max-width: 900px) {
  [data-techgrid] { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}

/* 编号卡片（编号和标题排一行，[data-numcell]）：同一排里别的卡片更高时，多出来的高度不再分到标题和正文之间，正文紧跟标题 */
[data-numcell] { align-content: start; }

/* 表单里的提示文字（placeholder）：原来浅色表单上是 #9b9797、深色表单上是浏览器默认的灰色，和底色的对比度只有 2.7:1、3:1，
   看不太清；改为对比度 4.5:1 以上 */
input::placeholder, textarea::placeholder { color: #6f6b6b !important; opacity: 1; }
input[style*="background:#2d2b2b"]::placeholder, textarea[style*="background:#2d2b2b"]::placeholder,
input[style*="background: rgb(45, 43, 43)"]::placeholder, textarea[style*="background: rgb(45, 43, 43)"]::placeholder { color: #a29e9e !important; }

/* 手机和平板上页脚的链接：原来每个只有 20px 高、间隔 8px，手指不好点准；改为每个 36px 高、不留间隔 */
@media (max-width: 900px) {
  [data-fcell] > div[style*="flex-direction:column"], [data-fcell] > div[style*="flex-direction: column"] { gap: 0 !important; }
  [data-fcell] > div[style*="flex-direction:column"] > *, [data-fcell] > div[style*="flex-direction: column"] > * { padding-top: 8px; padding-bottom: 8px; }
}

/* 手机上：文章顶部的路径（面包屑）里的链接、首页"全系机型总表"这类单独的文字链接，点按区域加高到 24px 以上 */
@media (max-width: 760px) {
  article > nav[aria-label] a { padding-top: 5px; padding-bottom: 5px; }
  main a[href="products.html"][style*="white-space:nowrap"], main a[href="products.html"][style*="white-space: nowrap"] { display: inline-block; padding-top: 4px; padding-bottom: 4px; }
}

/* 编号和标题排在一行：原来只有手机上、或者部分页面 1440px 以下这样排，宽屏上编号在上、标题在下占两行；
   现在所有宽度都排一行，标题长了在编号右边折行 */
[data-numrow] { display: grid !important; grid-template-columns: auto minmax(0, 1fr); column-gap: 12px; align-items: baseline; grid-column: 1 / -1; }
[data-numrow] > :first-child { margin-bottom: 0 !important; }
[data-numcell]:not(:has(> [data-numrow])) { display: grid !important; grid-template-columns: auto minmax(0, 1fr); column-gap: 12px; align-items: baseline; }
[data-numcell]:not(:has(> [data-numrow])) > :first-child { margin-bottom: 0 !important; }
[data-numcell]:not(:has(> [data-numrow])) > :nth-child(n+3) { grid-column: 1 / -1; }
/* 行业资料专题页"其他专题"的卡片：编号和专题名一行，"查看分类 →"仍在卡片底部 */
[data-cardgrid] > a:not(:has([data-numrow])) { display: grid !important; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto 1fr auto; column-gap: 10px !important; align-items: baseline; }
[data-cardgrid] > a:not(:has([data-numrow])) > :nth-child(n+3) { grid-column: 1 / -1; }
[data-cardgrid] > a:not(:has([data-numrow])) > :nth-child(3) { align-self: start; }

/* 数字栏（[data-statrow]，例如首页"4 类产品"）：数字和说明放得下一行时排一行。同一排里有一项放不下，typeset.js 先把那一格适当放宽
   （其他格相应收窄），还放不下才把这一排都改回上下排。手机上各页原来就是数字和说明一行，不动 */
@media (min-width: 621px) {
  [data-statrow] > div { display: flex !important; align-items: baseline; flex-wrap: wrap; column-gap: 12px; row-gap: 8px; }
  [data-statrow] > div > div:last-child { margin-top: 0 !important; }
}
/* 产品线页"拆一个例子"（JS / 企业代号 ……）：代号和含义放得下就排一行；有一格放不下，typeset.js 把六格都改回上下排 */
[data-exgrid] > div { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 8px; row-gap: 4px; }
[data-exgrid] > div > :first-child { margin-bottom: 0 !important; }
/* 行业资料专题页的文章列表：平板和手机上原来编号在上、标题在下，现在编号和标题一行，摘要和"阅读 →"在下面 */
@media (max-width: 900px) {
  div[data-row] { grid-template-columns: auto minmax(0, 1fr) !important; }
  div[data-row] > :nth-child(n+3) { grid-column: 1 / -1; }
}


/* 第九轮：平板宽度下文字栏太窄的几段（一行只放得下几个词）改为每排少放几项 */
@media (min-width: 621px) and (max-width: 900px) {
  /* 关于我们页"从勘察到售后"三项服务：一项一行，编号和标题在左、说明在右（和首页"四层防护"一样） */
  [data-svcgrid] { grid-template-columns: minmax(0, 1fr) !important; }
  [data-svcgrid] > * { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); column-gap: clamp(20px, 3vw, 32px); align-items: start; border-right: 0 !important; padding: clamp(18px, 2.6vw, 26px) 0 !important; }
  [data-svcgrid] > * + * { border-top: 2px solid rgba(243, 242, 242, .4); }
  [data-svcgrid] > * > [data-numrow] { grid-column: auto; }
  [data-svcgrid] > * > p { grid-column: 2; }
  /* 渠道合作页"从签约到第一个项目"六步：两列三行 */
  [data-steps] { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  /* 关于我们页的公司数字、各产品页首屏的参数：一项一行，数字在左、说明在右 */
  [data-herostats] { grid-template-columns: minmax(0, 1fr) !important; }
  [data-herostats] > * { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); column-gap: clamp(20px, 3vw, 32px); align-items: baseline; border-right: 0 !important; padding: clamp(14px, 2vw, 20px) 0 !important; }
  [data-herostats] > * + * { border-top: 1px solid rgba(32, 30, 29, .22); }
  [data-herostats] > * > :last-child { margin-top: 0 !important; }
  /* 搬车机器人页"智能版和遥控版怎么选"：两张并排时右边的说明一栏太窄，改为一张一行 */
  [data-variants] { grid-template-columns: minmax(0, 1fr) !important; }
  [data-variants] > * { border-right: 0 !important; padding-right: 0 !important; }
  [data-variants] > * + * { border-top: 2px solid rgba(32, 30, 29, .4); }
}
@media (min-width: 621px) and (max-width: 1100px) {
  /* 首页"江松集团"一段右边的六个数字：三列太窄，改为两列三行 */
  [data-costats] { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  /* 搬车机器人页参数全表：两组并排时右边一栏太窄，改为一组一行 */
  [data-specgroups] { grid-template-columns: minmax(0, 1fr) !important; }
}
@media (min-width: 901px) and (max-width: 1100px) {
  /* 行业资料专题页下面"其他专题"的四张卡片：三列太窄，改为两列两行（900px 以下原来就是两列） */
  [data-cardgrid]:not([data-grid4]) { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  [data-cardgrid]:not([data-grid4]) > a:nth-child(n) { border-left-color: rgba(32, 30, 29, .25) !important; }
  [data-cardgrid]:not([data-grid4]) > a:nth-child(2n+1) { border-left-color: transparent !important; }
}
@media (min-width: 901px) and (max-width: 1280px) {
  /* 立体车库页"关库门之前，确认两件事"：表格在半栏里太窄，改为上下排，表格占满整行（900px 以下原来就是上下排） */
  [data-stackwide] { grid-template-columns: minmax(0, 1fr) !important; row-gap: 8px; }
  [data-stackwide] > * { border-right: 0 !important; padding-right: 0 !important; padding-left: 0 !important; }
  [data-stackwide] > * + * { border-top: 2px solid color-mix(in srgb, currentColor 38%, transparent); padding-top: clamp(20px, 4vw, 32px) !important; margin-top: clamp(20px, 4vw, 32px); }
}