/* 浅色玻璃主题：参考 RomCloud 的整页背景 + 品牌 logo 卡片。
   加载顺序放在 rom.css 之后，只覆盖视觉，不动原有交互和响应式逻辑。 */

:root{
  --blue:#5577f0;
  --blue2:#4a67e6;
  --blue-deep:#3d55d4;
  --tx:#22304a;
  --sub:#58677d;
  --muted:#7e8b9d;
  --line:rgba(35,52,80,.12);
  --line-soft:rgba(35,52,80,.08);
  --glass:rgba(255,255,255,.56);
}

body{
  background-color:#dfe8f2;
  background-image:
    linear-gradient(180deg,rgba(255,255,255,.03) 0%,rgba(255,255,255,.08) 55%,rgba(255,255,255,.12) 100%),
    url("bg-air.jpg?v=20261019h");
  background-position:center;
  background-size:cover;
  background-repeat:no-repeat;
  background-attachment:fixed;
  background-image:
    linear-gradient(180deg,rgba(255,255,255,.03) 0%,rgba(255,255,255,.08) 55%,rgba(255,255,255,.12) 100%),
    image-set(
      url("bg-air.webp?v=20261020p1") type("image/webp"),
      url("bg-air.jpg?v=20261019h") type("image/jpeg")
    );
  color:var(--tx);
  font-family:"Microsoft YaHei UI","PingFang SC","Segoe UI",system-ui,sans-serif;
}
.bg-glow{display:none}
.wrap{max-width:1200px}

.glass{
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.46);
  box-shadow:0 20px 50px -38px rgba(26,45,78,.34),inset 0 1px 0 rgba(255,255,255,.7);
  -webkit-backdrop-filter:blur(11px) saturate(155%);
  backdrop-filter:blur(11px) saturate(155%);
}

.top{
  background:rgba(255,255,255,.1);
  border-bottom:1px solid rgba(255,255,255,.35);
  -webkit-backdrop-filter:blur(13px) saturate(145%);
  backdrop-filter:blur(13px) saturate(145%);
}
.logo{color:#1f2d45}
.logo-text em{color:#5577f0}
.top-nav a{color:#5b6b80}
.top-nav a:hover{color:#1f2d45;background:rgba(35,52,80,.06)}
.owner-badge{
  background:rgba(255,255,255,.42);
  border-color:rgba(255,255,255,.68);
  color:#1f2d45;
  box-shadow:0 6px 18px -14px rgba(26,45,78,.55);
}
.owner-badge img{border-color:rgba(255,255,255,.95)}
.top-nav a.owner-badge{
  color:#1f2d45;
  background:rgba(255,255,255,.42);
}
.top-nav a.owner-badge:hover{
  color:#1f2d45;
  background:rgba(255,255,255,.58);
}

.rom-announcement{
  display:flex;
  align-items:center;
  gap:11px;
  margin-top:14px;
  padding:9px 13px;
  border:1px solid rgba(255,255,255,.62);
  border-radius:13px;
  background:linear-gradient(90deg,rgba(244,249,255,.78),rgba(231,245,252,.58));
  box-shadow:0 12px 28px -26px rgba(26,45,78,.55);
  -webkit-backdrop-filter:blur(12px);
  backdrop-filter:blur(12px);
  color:#526277;
}
.announcement-badge{
  flex:none;
  padding:3px 8px;
  border-radius:7px;
  background:linear-gradient(135deg,#ef7f4d,#d94d52);
  color:#fff;
  font-size:9px;
  font-weight:900;
  letter-spacing:.7px;
}
.rom-announcement p{
  min-width:0;
  margin:0;
  display:flex;
  align-items:baseline;
  gap:8px;
  font-size:11px;
  line-height:1.55;
}
.rom-announcement p b{color:#26364c;font-size:11.5px}
.rom-announcement p span{color:#7b8799}
.rom-announcement > a{
  margin-left:auto;
  flex:none;
  color:#3d55d4;
  font-size:10.5px;
  font-weight:800;
  text-decoration:none;
}
.rom-announcement > a:hover{text-decoration:underline}

.hero{
  margin:28px 0 22px;
  padding:34px 36px 28px;
  border-radius:22px;
  background:linear-gradient(135deg,rgba(255,255,255,.2),rgba(255,255,255,.09));
}
.eyebrow{color:#5577f0}
.hero h1{
  color:#1c2940;
  font-family:"LXGW WenKai","Microsoft YaHei",sans-serif;
  font-size:40px;
  letter-spacing:-1px;
}
.hero p{color:#4f5f75;max-width:830px;text-wrap:balance}
.hero-badge{
  background:rgba(255,255,255,.34);
  border-color:rgba(35,52,80,.1);
}
.hero-badge b{color:#3d55d4}
.hero-badge span{color:#7e8b9d}
.hero-badge-kicker{
  display:block;
  margin-bottom:2px;
  color:#5577f0!important;
  font-size:8px;
  line-height:1.2;
  font-weight:800;
  letter-spacing:1.25px;
}

.searchbox input,.toolbar-search input{
  background:rgba(255,255,255,.72);
  border:1px solid rgba(35,52,80,.12);
  color:#22304a;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7);
}
.searchbox input::placeholder,.toolbar-search input::placeholder{color:#8b97a8}
.searchbox input:focus,.toolbar-search input:focus{
  border-color:rgba(85,119,240,.55);
  background:#fff;
  box-shadow:0 0 0 4px rgba(85,119,240,.12);
}

.stats > div{
  background:rgba(255,255,255,.34);
  border-color:rgba(35,52,80,.09);
}
.stats b{color:#3d55d4}
.stats span{color:#647286}

.zry-pipeline{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:8px;
  margin-top:13px;
  padding:8px 10px;
  border:1px solid rgba(35,52,80,.1);
  border-radius:12px;
  background:rgba(255,255,255,.25);
  color:#53657d;
  font-size:10.5px;
}
.pipeline-brand{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding-right:9px;
  border-right:1px solid rgba(35,52,80,.12);
  color:#26364c;
  font-weight:800;
  letter-spacing:.55px;
}
.pipeline-brand i{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:19px;
  height:19px;
  border-radius:6px;
  background:linear-gradient(135deg,#5d7cf5,#3652d5);
  color:#fff;
  font-style:normal;
  font-size:11px;
}
.pipeline-node{display:inline-flex;align-items:center;gap:4px}
.pipeline-node i{
  width:6px;
  height:6px;
  border-radius:50%;
  background:#a6b2c2;
}
.zry-pipeline.is-live .pipeline-node i{
  background:#22c55e;
  box-shadow:0 0 0 3px rgba(34,197,94,.1);
}
.pipeline-node b{font-weight:600}
.pipeline-signal{
  margin-left:auto;
  padding:2px 7px;
  border-radius:999px;
  background:rgba(34,197,94,.11);
  color:#15803d!important;
  font-size:9px;
  font-weight:900;
  letter-spacing:1px;
}

.section-head > div{
  background:rgba(255,255,255,.24);
  border:1px solid rgba(255,255,255,.5);
  border-radius:15px;
  padding:8px 15px 9px;
  -webkit-backdrop-filter:blur(9px);
  backdrop-filter:blur(9px);
}
.section-head h2{
  color:#1c2940;
  font-family:"LXGW WenKai","Microsoft YaHei",sans-serif;
  text-shadow:none;
}
.section-head p,.section-note{
  color:#2b3a4f;
  font-weight:500;
  text-shadow:none;
}
.section-note{
  background:rgba(255,255,255,.22);
  border:1px solid rgba(255,255,255,.46);
  border-radius:10px;
  padding:5px 10px;
  -webkit-backdrop-filter:blur(8px);
  backdrop-filter:blur(8px);
}

/* 首页品牌墙：大 logo + 中文名，参考 RomCloud 的玻璃卡片 */
.brand-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.brand-tile{
  position:relative;
  min-height:246px;
  padding:26px 18px 22px;
  border-radius:22px;
  background:linear-gradient(180deg,rgba(255,255,255,.19),rgba(255,255,255,.26));
  border:1px solid rgba(255,255,255,.44);
  box-shadow:0 22px 44px -36px rgba(26,45,78,.3);
  -webkit-backdrop-filter:blur(14px) saturate(120%) brightness(1.15);
  backdrop-filter:blur(14px) saturate(120%) brightness(1.15);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  gap:2px;
  color:#22304a;
}
.brand-own{
  position:absolute;
  top:12px;
  right:12px;
  padding:3px 7px;
  border:1px solid rgba(34,197,94,.24);
  border-radius:999px;
  background:rgba(240,253,244,.72);
  color:#15803d;
  font-size:9px;
  line-height:1.2;
  font-weight:800;
  letter-spacing:.25px;
}
.brand-tile::before{opacity:.1;filter:blur(16px)}
.brand-tile::after{opacity:.34}
.brand-tile:hover{
  transform:translateY(-5px);
  border-color:rgba(85,119,240,.38);
  box-shadow:0 28px 60px -34px rgba(26,45,78,.48);
}
.brand-logo{
  display:block;
  width:96px;
  height:96px;
  object-fit:contain;
  margin-bottom:11px;
  filter:drop-shadow(0 8px 16px rgba(35,52,80,.12));
}
.brand-word{
  position:static;
  left:auto;
  top:auto;
  color:#22304a;
  font-family:"LXGW WenKai","Microsoft YaHei",sans-serif;
  font-size:19px;
  line-height:1.3;
  font-weight:700;
  letter-spacing:-.2px;
  text-shadow:none;
}
.brand-label{font-size:14px;font-weight:600;color:#26364c;margin:1px 0 0;text-shadow:0 1px 2px rgba(255,255,255,.45)}
.brand-count{
  display:inline-block;
  align-self:center;
  font-size:12.5px;
  color:#2b3fa8;
  font-weight:700;
  margin-top:7px;
  padding:3px 10px;
  border-radius:999px;
  background:rgba(255,255,255,.42);
  border:1px solid rgba(255,255,255,.55);
  text-shadow:none;
  -webkit-backdrop-filter:blur(6px);
  backdrop-filter:blur(6px);
}
.brand-go{display:none}
.brand-tile.is-empty{opacity:.52;filter:grayscale(.25)}
.brand-tile.is-empty:hover{transform:none}

/* 机型 / 搜索结果 */
.cards{grid-template-columns:repeat(3,minmax(0,1fr));gap:15px}
.mcard{
  background:rgba(255,255,255,.26);
  border-color:rgba(255,255,255,.76);
  box-shadow:0 18px 44px -34px rgba(26,45,78,.38);
  -webkit-backdrop-filter:blur(20px) saturate(170%);
  backdrop-filter:blur(20px) saturate(170%);
}
.mcard:hover{
  border-color:rgba(85,119,240,.35);
  box-shadow:0 28px 54px -34px rgba(26,45,78,.48);
}
.art{
  background:
    radial-gradient(circle at 88% 16%, color-mix(in srgb, var(--bc) 42%, transparent), transparent 46%),
    linear-gradient(135deg,rgba(255,255,255,.3),rgba(238,243,252,.5));
}
.art::before{background:repeating-linear-gradient(115deg,transparent 0 18px,rgba(35,52,80,.035) 18px 19px)}
.art .word{color:#26344c;text-shadow:none}
.art .model-code{color:rgba(35,52,80,.6)}
.art .count-badge{
  color:#3d55d4;
  background:rgba(255,255,255,.68);
  border-color:rgba(255,255,255,.8);
}
.pkg .meta span.source-friend{
  color:#6d28d9;
  background:rgba(243,232,255,.82);
  border-color:rgba(139,92,246,.3);
}
.pkg .meta span.source-zry{
  color:#047857;
  background:rgba(220,252,231,.86);
  border-color:rgba(34,197,94,.32);
}
.pkg .meta span.source-official{
  color:#0369a1;
  background:rgba(224,242,254,.86);
  border-color:rgba(14,165,233,.28);
}
.pkg .meta span.source-manual{
  color:#a16207;
  background:rgba(254,249,195,.86);
  border-color:rgba(234,179,8,.3);
}
.mcard h2{color:#16233a;font-weight:700}
.mcard .body{background:rgba(249,252,255,.5)}
.brandline{color:#33445c}
.mcard .code{color:#4d5d73}
.tags span{
  color:#33445c;
  background:rgba(255,255,255,.55);
  border-color:rgba(35,52,80,.09);
}
.mfoot{border-top-color:rgba(35,52,80,.08)}
.mfoot small{color:#4d5d73}
.mfoot b{color:#4a67e6}

.brand-hero h1{
  color:#1c2940;
  font-family:"LXGW WenKai","Microsoft YaHei",sans-serif;
}
.brand-hero .sub{color:#5b6b80}
.brand-hero-word{
  right:150px;top:50%;transform:translateY(-50%);
  font-size:84px;opacity:.07;max-width:55%;overflow:hidden;white-space:nowrap;
  text-shadow:none;
}
.brand-hero-logo{
  position:absolute;right:38px;top:50%;transform:translateY(-50%);
  width:88px;height:88px;object-fit:contain;float:none;margin:0;z-index:2;
  filter:drop-shadow(0 8px 16px rgba(35,52,80,.12));
}
.model-stats div{color:#526277}
.model-stats b{color:#1c2940}

.toolbar{border-radius:16px}
.sort{background:rgba(250,253,255,.62);border-color:rgba(255,255,255,.65)}
.sort button{color:#35455c}
.sort button.on{background:rgba(85,119,240,.14);color:#3d55d4}
.clear-search{
  background:rgba(255,255,255,.58);
  border-color:rgba(35,52,80,.12);
  color:#5b6b80;
}
.clear-search:hover{color:#1c2940;border-color:rgba(85,119,240,.35)}

.crumb{
  display:inline-flex;
  width:fit-content;
  color:#22304a;
  font-weight:600;
  background:rgba(250,253,255,.62);
  border:1px solid rgba(255,255,255,.65);
  border-radius:999px;
  padding:4px 11px;
  -webkit-backdrop-filter:blur(8px);
  backdrop-filter:blur(8px);
}
.crumb a{color:#3d55d4}
.model-head h1{
  color:#1c2940;
  font-family:"LXGW WenKai","Microsoft YaHei",sans-serif;
}
.model-head .sub{color:#5b6b80}
.brand-pill{
  color:#3d55d4;
  background:rgba(255,255,255,.62);
  border-color:rgba(85,119,240,.22);
}
.skeleton-title{background:rgba(35,52,80,.09)}
.skeleton-line{background:rgba(35,52,80,.06)}

.filters{border-radius:16px}
.filter-row + .filter-row{border-top-color:rgba(35,52,80,.08)}
.filter-row > b{color:#3d4c62}
.chip{
  background:rgba(255,255,255,.42);
  border-color:rgba(35,52,80,.11);
  color:#5b6b80;
}
.chip:hover{border-color:rgba(85,119,240,.4);color:#3d55d4}
.chip.on{background:#5577f0;border-color:#5577f0;color:#fff}
#count,#pkgCount{
  display:inline-block;
  width:fit-content;
  color:#35455c;
  background:rgba(250,253,255,.62);
  border:1px solid rgba(255,255,255,.65);
  border-radius:999px;
  padding:5px 11px;
  font-weight:500;
  -webkit-backdrop-filter:blur(8px);
  backdrop-filter:blur(8px);
}
#count b,#pkgCount b{color:#1c2940}

.pkg{
  background:rgba(255,255,255,.5);
  border-color:rgba(255,255,255,.76);
  box-shadow:0 14px 34px -30px rgba(26,45,78,.35);
}
.pkg:hover{border-color:rgba(85,119,240,.35)}
.pkg .ver{color:#1c2940}
.pkg .meta span{
  color:#43536a;
  background:rgba(255,255,255,.48);
  border-color:rgba(35,52,80,.09);
}
.pkg .meta span.direct{color:#14804a;background:rgba(34,197,94,.09);border-color:rgba(34,197,94,.2)}
.pkg .meta span.signed{color:#a16207;background:rgba(245,158,11,.1);border-color:rgba(245,158,11,.22)}
.pkg .meta span.resolve{color:#3d55d4;background:rgba(85,119,240,.1);border-color:rgba(85,119,240,.22)}
.pkg .md5{color:#5c6a7e}
.pkg .actions button{
  background:rgba(85,119,240,.14);
  color:#2f47c9;
  border-color:rgba(85,119,240,.22);
}
.pkg .actions a,.pkg .actions button.resolve-btn{
  background:linear-gradient(135deg,#5b7cf2,#405bd8);
  color:#fff;
}
.pkg .actions a:hover{filter:brightness(1.06)}

.more-wrap button{
  background:rgba(255,255,255,.48);
  border-color:rgba(85,119,240,.24);
  color:#3d55d4;
}
.more-wrap button:hover{background:rgba(255,255,255,.85)}
.model-extra .extra-item{border-bottom-color:rgba(35,52,80,.07)}
.model-extra b{color:#5b6b80}
.model-extra code{color:#3d55d4}
.model-extra p{color:#5b6b80}
.model-extra button{
  background:rgba(85,119,240,.1);
  border-color:rgba(85,119,240,.22);
  color:#3d55d4;
}

.empty{color:#6c7a8d}
.notice{
  color:#2b3a4f;
  background:rgba(250,253,255,.72);
  border:1px solid rgba(255,255,255,.7);
  box-shadow:0 14px 34px -28px rgba(26,45,78,.5);
  -webkit-backdrop-filter:blur(14px);
  backdrop-filter:blur(14px);
}
.notice b{color:#1c2940}
.foot{
  color:#334156;
  background:rgba(245,250,255,.58);
  border-top-color:rgba(35,52,80,.09);
  -webkit-backdrop-filter:blur(12px);
  backdrop-filter:blur(12px);
}
.foot a{color:#3d55d4}
.foot-note{color:#5b687b}

.site-footer{
  margin-top:38px;
  padding:0 0 24px;
  color:#526277;
  background:transparent;
  border-top:0;
  -webkit-backdrop-filter:none;
  backdrop-filter:none;
}
.site-footer-card{
  display:grid;
  grid-template-columns:minmax(240px,1fr) minmax(0,2.25fr);
  gap:44px;
  padding:28px 30px;
  border-radius:22px;
  border:1px solid rgba(255,255,255,.62);
  background:linear-gradient(135deg,rgba(247,251,255,.66),rgba(235,245,252,.48));
  box-shadow:0 24px 55px -42px rgba(26,45,78,.5);
  -webkit-backdrop-filter:blur(16px) saturate(120%);
  backdrop-filter:blur(16px) saturate(120%);
}
.footer-brandline{
  display:inline-flex;
  align-items:center;
  gap:11px;
  color:#1f2d45!important;
  text-decoration:none!important;
}
.footer-zmark{
  width:40px;
  height:40px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:12px;
  background:linear-gradient(145deg,#6f8cff,#3e5bdd);
  color:#fff;
  font-size:22px;
  font-weight:900;
  box-shadow:0 10px 22px -14px rgba(62,91,221,.8);
}
.footer-brandline b{display:block;font-size:22px;line-height:1.1}
.footer-brandline em{
  display:block;
  margin-top:3px;
  color:#5c78df;
  font-size:8px;
  font-style:normal;
  font-weight:800;
  letter-spacing:1.6px;
}
.footer-brand p{
  max-width:340px;
  margin:14px 0 13px;
  color:#64748b;
  font-size:11.5px;
  line-height:1.8;
}
.footer-live{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:4px 9px;
  border:1px solid rgba(34,197,94,.22);
  border-radius:999px;
  background:rgba(240,253,244,.7);
  color:#15803d;
  font-size:9px;
  font-weight:800;
  letter-spacing:.25px;
}
.footer-live i{
  width:6px;
  height:6px;
  border-radius:50%;
  background:#22c55e;
  box-shadow:0 0 0 3px rgba(34,197,94,.12);
}
.footer-nav{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:22px;
}
.footer-nav h3{
  margin:1px 0 11px;
  color:#1f2d45;
  font-size:11px;
  font-weight:800;
  letter-spacing:.6px;
}
.footer-nav a,
.footer-nav div > span{
  display:block;
  margin-top:7px;
  color:#738196;
  font-size:10.5px;
  line-height:1.55;
  text-decoration:none;
}
.footer-nav a:hover{color:#3d55d4}
.footer-bottom{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  padding-top:14px;
  color:#758297;
  font-size:10.5px;
  line-height:1.65;
}
.footer-credit{
  display:flex;
  align-items:center;
  gap:7px;
  margin-top:5px;
  color:#8a96a7;
  font-size:9px;
  letter-spacing:.55px;
}
.footer-credit a{
  color:#526fd8;
  text-decoration:none;
}
.footer-credit a:hover{text-decoration:underline}
.back-top{
  position:fixed;
  right:22px;
  bottom:22px;
  z-index:50;
  width:40px;
  height:40px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:12px;
  background:rgba(38,54,76,.88);
  color:#fff!important;
  font-size:18px;
  text-decoration:none!important;
  box-shadow:0 12px 28px -14px rgba(20,32,52,.75);
  -webkit-backdrop-filter:blur(10px);
  backdrop-filter:blur(10px);
}
.back-top:hover{background:#2c405b;transform:translateY(-2px)}

.stats em{
  display:block;
  margin-top:2px;
  font-size:10.5px;
  line-height:1.45;
  color:#7a8799;
  font-style:normal;
}
.mcard.is-empty{
  opacity:.82;
  filter:grayscale(.35);
  cursor:default;
}
.mcard.is-empty:hover{
  transform:none;
  border-color:var(--line);
  box-shadow:none;
}
.mcard.is-empty .count-badge{
  background:rgba(255,255,255,.62);
  color:#6f7c8f;
}
.mcard.is-empty .mfoot b{color:#77859a}

@media(max-width:1020px){
  .brand-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .cards{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:760px){
  body{
    background-attachment:scroll;
    background-image:
      linear-gradient(180deg,rgba(255,255,255,.03) 0%,rgba(255,255,255,.08) 55%,rgba(255,255,255,.12) 100%),
      url("bg-air.jpg?v=20261019h");
    background-image:
      linear-gradient(180deg,rgba(255,255,255,.03) 0%,rgba(255,255,255,.08) 55%,rgba(255,255,255,.12) 100%),
      image-set(
        url("bg-air-mobile.webp?v=20261020p1") type("image/webp"),
        url("bg-air.jpg?v=20261019h") type("image/jpeg")
      );
  }
  .brand-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cards{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hero{padding:26px 22px 22px}
  .hero h1{font-size:30px}
  .brand-tile{min-height:190px;padding:18px 12px}
  .brand-logo{width:70px;height:70px}
  .brand-word{font-size:16px}
  .brand-hero-logo{width:62px;height:62px;right:18px}
  .brand-hero-word{right:95px;font-size:62px}
  .zry-pipeline{gap:6px;padding:7px 8px}
  .pipeline-brand{border-right:0}
  .pipeline-signal{margin-left:0}
  .site-footer{margin-top:28px;padding:0 14px 18px}
  .site-footer-card{grid-template-columns:1fr;gap:24px;padding:22px 18px;border-radius:18px}
  .footer-nav{grid-template-columns:1fr 1fr;gap:20px 16px}
  .footer-bottom{display:block;padding:12px 2px 0}
  .footer-bottom span{display:block;margin-top:5px}
  .footer-credit{margin-top:8px;flex-wrap:wrap}
  .back-top{right:14px;bottom:14px;width:38px;height:38px;border-radius:11px}
  .rom-announcement{margin-top:10px;padding:9px 11px;align-items:flex-start;flex-wrap:wrap}
  .rom-announcement p{display:block;flex:1;min-width:190px}
  .rom-announcement p b,.rom-announcement p span{display:block}
  .rom-announcement > a{margin-left:0;width:100%;padding-left:53px}
}
@media(max-width:560px){
  .brand-grid{grid-template-columns:1fr 1fr}
  .cards{grid-template-columns:1fr}
  .brand-tile{min-height:172px}
  .brand-logo{width:62px;height:62px}
}
@media(max-width:380px){
  .brand-grid{grid-template-columns:1fr}
}