/* =========================================================================
   components.css —— 可复用组件
   -------------------------------------------------------------------------
   按钮、卡片（特性卡/资料卡）、标签 chip、配置表 spec。
   ⚠️ 本文件必须早于 sections.css 加载。
   ========================================================================= */

/* ==================== 按钮 ==================== */
.btn {
  display: inline-block;
  padding: clamp(12px, 1.4vh, 20px) clamp(24px, 2.6vw, 42px);
  border-radius: 10px;
  font-size: var(--fs-btn);
  font-weight: 600;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform .25s cubic-bezier(.22,.61,.36,1),
              box-shadow .25s ease,
              background .25s ease,
              border-color .25s ease;
}

/* 主按钮：渐变 + 发光 */
.btn-primary {
  background: linear-gradient(100deg, var(--accent), var(--accent-2));
  /* 渐变默认以 padding-box 为原定尺寸、却按 border-box 裁剪，
     .btn 那 1px 透明边框里就会塞进「被压扁重复的整条渐变」——
     端点青色露出来，看着就是左边缘一道亮线。
     让渐变从 border-box 起算，边框内是渐变的真实延伸，亮线消失且不留缝。 */
  background-origin: border-box;
  color: #fff;
  box-shadow: 0 8px 28px -8px var(--accent-glow);
}
.btn-primary:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 40px -8px var(--accent-glow);
}

/* 次按钮：玻璃 + 描边 */
.btn-ghost {
  background: var(--glass);
  color: var(--text);
  border-color: var(--line-strong);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.btn-ghost:hover {
  transform: translateY(-3px);
  background: var(--glass-strong);
  border-color: var(--accent);
}

.btn-row { display: flex; gap: 14px; flex-wrap: wrap; margin-top: var(--gap-lg); }

/* =========================================================================
   三个高亮关键词的字体工具类
   -------------------------------------------------------------------------
   游戏特色三张卡里各有一个被渐变高亮的关键词。当前只有「像素」启用了
   专属字体，另外两个是**备选预设，暂未启用** —— 群主正在自己找字体，
   找到后按 tools/subset-font.py 的 FONTS 表加一条即可。

     .font-pixel   像素     ✅ 已启用  Minecraft AE 像素体（点阵）
     .font-casual  由你决定  ✅ 已启用  志莽行书（行书，随性）
     .font-black   各不相同  ⬜ 未启用  Noto Sans SC 900
     .font-serif   —        ⬜ 未启用  Noto Serif SC 900

   ⚠️ 选字体的硬指标（踩过的坑）：卡片标题其余文字是雅黑 Bold，
      高亮词比它细就会把「加粗」抵消掉。实测「站酷庆科黄油体 / 快乐体」
      这类几何显示体在 23px 下都比雅黑 Bold 细，只能当装饰、不能当高亮。
      手写体同样偏细，所以靠下面 .card .grad 的辉光补一点重量。
      对比图见 docs/字体对比-高亮关键词.png 与 docs/字体对比-手写体候选.png。
   ========================================================================= */
.font-pixel {
  font-family: var(--font-pixel);
  /* 像素字形的字面框几乎是满格，同号看上去比中文黑体偏大一圈；
     而且它笔画粗、又是合成加粗，视觉重量更大。
     所以这里不跟中文同号，而是「同号再收 1px」——
     1em 取的是父级字号，加减的是固定像素，屏幕大小不影响这个差值。
     嫌大/嫌小就改这个 1px。 */
  /* 2026-10：换成 Terrarum 后按群主要求逐次放大：+6% → +10% → +10%，
  累计 ×1.2826（1.06 × 1.10 × 1.10）。要再调就改这个系数。 */
  font-size: calc((1em - 1px) * 1.2826);
  /* 子集里只有一档字重（400），这里请求 800 会触发浏览器的合成加粗，
     笔画真的会变粗 —— 这也是三个彩色词里唯一要合成加粗的 */
  font-weight: 800;
}

.font-fangyuan {
  font-family: var(--font-fangyuan);
  /* 方圆体的字面框比黑体略小：同样 60px 渲染，雅黑 Bold 墨迹高 60px，
     方圆体（wght700·BEVL100）56px，实测缩放 1.04。
     BEVL 是它的「方圆」轴：100 = 圆角，1 = 方角；这里取圆角，
     和站点的胶囊按钮、圆角卡片是一路。 */
  font-size: 1.04em;
  /* 子集里是 wght=700 的静态实例，@font-face 也声明 700，
     这里必须写 700 —— 写别的值会让浏览器去做合成加粗或降级取字重 */
  font-weight: 700;
}

.font-soft {
  font-family: var(--font-soft);
  /* 手写字体的字面框比黑体小很多：同样 60px 渲染，雅黑 Bold 墨迹高 59px，
     沐瑶软笔只有 44px（约 75%）。1.21 是实测墨迹尺寸比，用 em 而不是固定
     px —— 这个比例在任何字号下都成立。嫌小/嫌大就改这个 1.21。 */
  font-size: 1.21em;
  /* 只有一档 400。刻意不请求更粗：手写体一合成加粗就糊成一团，
     重量交给 .card .grad 的辉光去补 */
  font-weight: 400;
}

/* 备选预设：骆国城毛笔小行（比沐瑶规整，但授权来源不明，已换下） */
.font-kai {
  font-family: var(--font-kai);
  font-size: 1.14em;
  font-weight: 400;
}

/* 备选预设：马善政毛笔楷书（更端正，但偏印刷楷，没有骆国城那款的笔意） */
.font-kai2 {
  font-family: var(--font-kai2);
  font-size: 1.06em;
  font-weight: 400;
}

/* 备选预设：志莽行书 —— 群主否掉了，太潦草，留着只是为了对比 */
.font-casual {
  font-family: var(--font-casual);
  font-size: 1.18em;
  font-weight: 400;
}

/* 以下两个是备选预设，站点当前没有元素在用（@font-face 仍在 tokens.css，
   但浏览器不会下载没用到的字体，所以不产生流量） */
.font-black {
  font-family: var(--font-black);
  /* 子集就是实例化到 900 的，这里写 900 是明确指令，避免触发合成加粗 */
  font-weight: 900;
}

.font-serif {
  font-family: var(--font-serif);
  font-weight: 900;
}

/* 卡片里被渐变高亮的关键词 —— 统一加粗
   -------------------------------------------------------------------------
   三个彩色词（由你决定 / 各不相同 / 像素）看着比同一行的白字细，原因有两条：
     1. 中文字体（微软雅黑 / 苹方）只有 Regular 和 Bold 两档，
        font-weight 写 800 也只落到 Bold，单靠字重挤不出更多「肉」；
     2. 渐变填充把笔画内部的实心色换成了紫→青过渡色，对比度低于纯白，
        视觉上就更轻。
   所以除了让每个词用上更重的字体（见上面三个 .font-* 类），
   再给笔画补一圈 0 偏移的同色辉光：边缘被撑开约半个像素，显粗，
   也贴合整站的霓虹调性。

   ⚠️ 这里不写 font-weight —— 写了会盖掉 .font-black / .font-serif 的 900
      （.card .grad 是两个类，比单个 .font-* 类优先级高）。字重统一由
      上面那三个字体类各自声明。

   注：曾经加过 -webkit-text-stroke 描边（比辉光更硬地撑开笔画），
   但描边是单一实色、和渐变填充的过渡色对不上，已去掉，不要再加回来。
   （要连首屏标题、区块大标题、大字陈述里的渐变一起加粗，
      把下面的 .card .grad 改成 .grad 即可 —— 但那三处没有专属字体，
      得自己补 font-weight。） */
.card .grad {
  text-shadow: 0 0 1px rgba(124, 92, 255, .60);
}

/* ==================== 特性卡片（玻璃） ==================== */
.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.card {
  position: relative;
  background: var(--glass);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--pad-card);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  overflow: hidden;
  transition: transform .35s cubic-bezier(.22,.61,.36,1),
              border-color .35s ease,
              background .35s ease;
}
/* 悬停时从上方透出一层渐变光 */
.card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(160deg, var(--accent-glow), transparent 55%);
  opacity: 0;
  transition: opacity .35s ease;
  pointer-events: none;
}
.card:hover {
  transform: translateY(-6px);
  border-color: var(--line-strong);
  background: var(--glass-strong);
}
.card:hover::before { opacity: .5; }
.card > * { position: relative; z-index: 1; }

/* 序号方块 */
.card-num {
  width: var(--size-num); height: var(--size-num);
  border-radius: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: var(--fs-h3);
  color: #fff;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  box-shadow: 0 6px 20px -6px var(--accent-glow);
  margin-bottom: 20px;
}

.card p { color: var(--text-2); font-size: var(--fs-sm); }

/* ==================== 配置要求 ==================== */
.grid-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

.spec {
  background: var(--glass);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--pad-card);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: border-color .3s ease;
}
.spec:hover { border-color: var(--line-strong); }

.spec h3 {
  font-size: var(--fs-h3);
  margin-bottom: 20px;
  color: var(--accent-2);
  letter-spacing: .02em;
}

.spec-list {
  margin: 0;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 13px 22px;
  font-size: var(--fs-btn);
}
.spec-list dt { color: var(--text-3); white-space: nowrap; }
.spec-list dd { margin: 0; color: var(--text); }

/* ==================== 联系弹窗（点「联系我们」） ====================
   结构见 index.html 末尾的 <dialog id="contact-modal">。
   原生 dialog 负责遮罩之外的交互（Esc、焦点陷阱），这里只管长相。 */
.modal {
  width: min(92vw, 480px);
  max-width: 480px;
  padding: 0;
  border: 0;
  border-radius: var(--radius);
  background: transparent;
  color: var(--text);
}

/* 遮罩：dialog 自带的 ::backdrop，深色 + 轻微模糊，和站点基调一致 */
.modal::backdrop {
  background: rgba(4, 5, 10, .74);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

.modal-inner {
  padding: clamp(22px, 3vw, 34px);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: var(--bg-1);
  box-shadow: 0 40px 80px -40px rgba(0, 0, 0, .92);
  text-align: center;
}

.modal-title {
  margin: 6px 0 var(--gap-sm);
  font-size: var(--fs-h3);
  font-weight: 800;
}

.modal-lead {
  margin: 0;
  color: var(--text-2);
  font-size: var(--fs-sm);
}

/* 地址用等宽字体，避免 0/O、1/l 混淆；user-select:all 让单击能整段选中 */
.modal-addr {
  margin: var(--gap-md) 0;
  padding: 14px 16px;
  border: 1px dashed var(--line-strong);
  border-radius: 12px;
  background: var(--glass);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: clamp(14px, 1.1vw + 8px, 20px);
  letter-spacing: .01em;
  word-break: break-all;
  user-select: all;
}

.modal-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap-sm);
  justify-content: center;
}

/* 提示行常驻占位，出现文字时不会把布局顶跳 */
.modal-hint {
  min-height: 1.4em;
  margin: var(--gap-sm) 0 0;
  font-size: var(--fs-xs);
  color: var(--text-3);
}

/* 窄屏：三个按钮竖着排，地址字号收一点 */
@media (max-width: 600px) {
  .modal-actions { flex-direction: column; }
  .modal-actions .btn { width: 100%; }
  .modal-addr { font-size: var(--fs-sm); }
}




/* ==================== 不可用按钮（暂无…） ====================
   下载区那两个入口目前没有去处（预约通道、玩家群都还没开），
   文案改成「暂无…」后仍沿用 .btn 的外观，但：
     · 元素是 <span>，不是链接 —— 没有可点的目标，键盘也不该停在上面
     · 这里只做「去色 + 压暗」，**不改任何颜色定义**，观感即「不可用」
     · pointer-events: none 顺手关掉悬停位移和发光 */
.btn.is-muted {
  filter: grayscale(1);
  opacity: .68;
  cursor: default;
  pointer-events: none;
}


/* ==================== 公告（列表 + 弹窗正文） ====================
   列表页 announcements.html；弹窗复用 .modal / .modal-inner。 */
.modal-lead { white-space: pre-line; }

.ann-list { display: grid; gap: 18px; margin-bottom: var(--gap-lg); }

.ann-item {
  padding: 22px 24px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--glass);
}
.ann-item:target { border-color: var(--accent); }   /* 从弹窗跳过来时高亮 */
.ann-head {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px 14px;
  margin-bottom: 10px;
}
.ann-date {
  font-family: var(--mono);
  font-size: var(--fs-xs);
  color: var(--text-3);
}
.ann-title { margin: 0; font-size: var(--fs-card); font-weight: 800; }
.ann-body {
  margin: 8px 0 0;
  color: var(--text-2);
  font-size: var(--fs-sm);
  line-height: 1.9;
  white-space: pre-line;   /* 段内单行回车保留成换行（空行仍然分段） */
}
.ann-back { margin-top: var(--gap-md); }


/* ==================== 公告横幅（首页顶部） ====================
   和居中的「联系我们」弹窗区分开：贴顶栏下方、从顶部滑下、不遮页面、不抢焦点。 */
.ann-banner {
  position: fixed;
  top: calc(var(--topbar-h) + 14px);
  left: 50%;
  z-index: 120;
  width: min(var(--maxw), calc(100vw - 32px));
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 16px;
  align-items: center;
  padding: 14px 16px 14px 20px;
  border: 1px solid var(--line-strong);
  border-radius: 14px;
  background: rgba(11, 13, 22, .97);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 28px 64px -28px rgba(0, 0, 0, .95);
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, -18px);
  transition: opacity .3s ease, transform .3s cubic-bezier(.22,.61,.36,1), visibility .3s;
}
.ann-banner.is-open { opacity: 1; visibility: visible; transform: translate(-50%, 0); }

/* 左侧渐变竖条：一眼看出是公告而不是普通弹窗 */
.ann-banner::before {
  content: "";
  position: absolute;
  left: 0; top: 12px; bottom: 12px;
  width: 3px; border-radius: 3px;
  background: linear-gradient(var(--accent), var(--accent-2));
}

.ann-banner-tag {
  padding: 4px 10px;
  border-radius: 999px;
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: .08em;
  color: #fff;
  background: linear-gradient(100deg, var(--accent), var(--accent-2));
}

.ann-banner-text { min-width: 0; }
.ann-banner-title {
  margin: 0 0 3px;
  font-size: var(--fs-sm);
  font-weight: 800;
  color: var(--text);
}
.ann-banner-sum {
  margin: 0;
  font-size: var(--fs-xs);
  color: var(--text-2);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ann-banner-actions { display: flex; align-items: center; gap: 10px; }
.btn-ann { padding: 10px 18px; font-size: var(--fs-xs); }
.ann-banner-close {
  width: 32px; height: 32px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: var(--glass);
  color: var(--text-2);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  transition: color .2s, border-color .2s, background .2s;
}
.ann-banner-close:hover { color: var(--text); border-color: var(--line-strong); background: var(--glass-strong); }

/* 窄屏：标签换行到标题上方，摘要允许两行 */
@media (max-width: 600px) {
  /* 窄屏压扁：标签留在行内、摘要最多一行，尽量少挡首屏 */
  .ann-banner {
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 8px 10px;
    align-items: center;
    padding: 10px 10px 10px 14px;
    border-radius: 12px;
  }
  .ann-banner-tag { padding: 3px 8px; font-size: 11px; letter-spacing: .04em; }
  .ann-banner-title { font-size: 13px; margin-bottom: 2px; }
  .ann-banner-sum {
    font-size: 11px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .ann-banner-actions { gap: 6px; }
  .btn-ann { padding: 7px 12px; font-size: 11px; }
  .ann-banner-close { width: 26px; height: 26px; font-size: 16px; }
}

/* ==================== 长文页（隐私政策） ==================== */
.prose h3 {
  margin: var(--gap-lg) 0 var(--gap-sm);
  font-size: var(--fs-h3);
  font-weight: 800;
}
.prose h3:first-of-type { margin-top: var(--gap-md); }
.prose a {
  color: var(--accent-2);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.prose a:hover { color: var(--text); }
.prose .h-card { font-size: var(--fs-h3); }


/* ==================== 制作组页（team.html） ==================== */
.team-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--gap-md);
  margin: 0 0 var(--gap-lg);
}
.team-stat {
  padding: 22px 20px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--glass);
  text-align: center;
}
.team-num {
  display: block;
  font-size: clamp(34px, 3.6vw, 54px);
  font-weight: 800;
  line-height: 1.1;
  background: linear-gradient(100deg, var(--accent), var(--accent-2));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-variant-numeric: tabular-nums;
}
.team-label { display: block; margin-top: 6px; font-size: var(--fs-xs); color: var(--text-3); }

.team-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--gap-md);
}
.team-card {
  padding: 22px 24px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--glass);
  transition: transform .28s cubic-bezier(.22,.61,.36,1), border-color .28s ease, background .28s ease;
  /* 错峰出现：--i 由 JS 写入 */
  transition-delay: calc(var(--i, 0) * 70ms);
}
@keyframes team-in {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: none; }
}
.team-card {
  animation: team-in .55s cubic-bezier(.22,.61,.36,1) both;
  animation-delay: calc(var(--i, 0) * 70ms);
}
.team-card:hover {
  transform: translateY(-3px);
  border-color: var(--line-strong);
  background: var(--glass-strong);
}
.team-card-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  margin-bottom: 8px;
}
.team-card-name { font-size: var(--fs-card); font-weight: 800; }
.team-card-count {
  font-family: var(--mono);
  font-size: var(--fs-xs);
  color: var(--accent-2);
  white-space: nowrap;
}
.team-card-desc { margin: 0 0 16px; font-size: var(--fs-sm); color: var(--text-2); line-height: 1.8; }

.team-bar {
  height: 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .07);
  overflow: hidden;
}
.team-bar i {
  display: block;
  height: 100%;
  width: 0;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  transition: width 1.1s cubic-bezier(.22,.61,.36,1);
}

.team-note {
  margin-top: var(--gap-lg);
  padding: 24px 26px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: linear-gradient(180deg, rgba(124, 92, 255, .06), transparent);
}
.team-note .h-card { font-size: var(--fs-h3); margin-bottom: var(--gap-sm); }
.team-note p { margin: 0 0 10px; font-size: var(--fs-sm); color: var(--text-2); line-height: 1.9; }
.team-note p:last-child { margin-bottom: 0; }

/* 减少动画：全部直给终值 */
@media (prefers-reduced-motion: reduce) {
  .team-card, .team-bar i { transition: none !important; }
  .team-card:hover { transform: none; }
}


/* ---------- 成员名单 + 筛选 ---------- */
.team-members-head { margin: var(--gap-lg) 0 var(--gap-md); }
.team-members-head .h-card { font-size: var(--fs-h3); margin-bottom: 6px; }
.team-members-head p { margin: 0; font-size: var(--fs-sm); }

.team-filters {
  display: flex; flex-wrap: wrap; gap: 10px;
  margin-bottom: var(--gap-md);
}
.team-chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--glass);
  color: var(--text-2);
  font: inherit;
  font-size: var(--fs-xs);
  cursor: pointer;
  transition: color .2s, border-color .2s, background .2s, transform .2s;
}
.team-chip em {
  font-style: normal;
  font-family: var(--mono);
  font-size: 11px;
  opacity: .6;
}
.team-chip:hover { color: var(--text); border-color: var(--line-strong); transform: translateY(-1px); }
.team-chip.is-on {
  color: #fff;
  border-color: transparent;
  background: linear-gradient(100deg, var(--accent), var(--accent-2));
}
.team-chip.is-on em { opacity: .85; }

.team-members {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 12px;
}
.team-member {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--glass);
  animation: team-in .45s cubic-bezier(.22,.61,.36,1) both;
  animation-delay: calc(var(--i, 0) * 40ms);
  transition: border-color .25s ease, background .25s ease, transform .25s ease;
}
.team-member:hover {
  border-color: var(--line-strong);
  background: var(--glass-strong);
  transform: translateY(-2px);
}
.team-avatar {
  flex: 0 0 auto;
  width: 42px; height: 42px;
  display: grid; place-items: center;
  border-radius: 50%;
  font-size: 17px; font-weight: 800;
  color: #fff;
  background: linear-gradient(135deg,
    var(--av-a, var(--accent)),
    var(--av-b, var(--accent-2)));
  box-shadow: 0 8px 20px -10px rgba(0, 0, 0, .55);
  transition: transform .25s ease, box-shadow .25s ease;
}
.team-member:hover .team-avatar { transform: scale(1.06); }
.team-member-body { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.team-member-name {
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.team-member-depts { display: flex; flex-wrap: wrap; gap: 6px; }
.team-member-depts em {
  font-style: normal;
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 999px;
  color: var(--text-3);
  background: rgba(255, 255, 255, .06);
}

@media (prefers-reduced-motion: reduce) {
  .team-member, .team-chip { animation: none !important; transition: none !important; }
  .team-member:hover, .team-chip:hover { transform: none; }
}


.team-avatar-img {
  padding: 0;
  overflow: hidden;
  background: var(--bg-2);
}
.team-avatar-img img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}