/* Group pages (A–Z lists) */
.group-page { display: flex; flex-direction: column; }

/* Hero panel */
.group-page .lp-hero-inner { grid-template-columns: 1fr 1fr; }
.group-page .lp-visual { justify-content: stretch; }
.az-panel {
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 100%;
  padding: 28px;
  border-radius: 10px;
  background: #fff;
  color: #000;
  box-shadow: 0 30px 60px rgba(0, 0, 0, .25);
}
.az-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
.az-head > div { display: flex; flex-direction: column; gap: 4px; }
.az-head h3 { font-size: 22px; }
.az-count { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 10px; background: var(--cream); font-weight: 800; white-space: nowrap; }
.az-grid { display: grid; grid-template-columns: repeat(13, 1fr); gap: 6px; }
.az-grid a {
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  border-radius: 10px;
  background: var(--cream);
  font-family: var(--font-head);
  font-size: 18px;
  font-weight: 600;
  transition: background .3s var(--ease), color .3s var(--ease), transform .3s var(--ease);
}
.az-grid a:hover { background: var(--forest); color: #fff; transform: translateY(-2px); }
.az-grid a.is-spot { background: var(--sun); color: #000; transform: none; }
.spot.pop { animation: spot-pop .45s var(--ease); }
@keyframes spot-pop { 0% { transform: scale(.97); opacity: .6; } 100% { transform: none; opacity: 1; } }
.spot-letter.speaking { animation: pulse .8s var(--ease) infinite; }
.spot {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px;
  border-radius: 10px;
  background: var(--forest);
  color: #fff;
}
.spot-letter {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 72px;
  height: 72px;
  border-radius: 10px;
  background: var(--sun);
  color: #000;
  font-family: var(--font-head);
  font-size: 36px;
  font-weight: 600;
}
.spot-body { display: flex; flex-direction: column; gap: 8px; flex: 1; min-width: 0; }
.spot-label { display: inline-flex; align-items: center; gap: 6px; font-weight: 800; }
.spot-label .ic { color: var(--sun); }
.spot-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.spot-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 10px;
  background: rgba(255, 255, 255, .1);
  color: #fff;
  font-weight: 700;
  transition: background .3s var(--ease), color .3s var(--ease);
}
.spot-chip b { font-weight: 800; }
.spot-chip:hover, .spot-chip.speaking { background: var(--sun); color: #000; }
.spot-go { display: grid; place-items: center; flex-shrink: 0; width: 44px; height: 44px; border-radius: 10px; background: #fff; color: #000; transition: background .3s var(--ease), transform .4s var(--ease); }
.spot-go:hover { background: var(--sun); transform: rotate(-45deg); }
.az-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px; padding-top: 4px; }

/* Tools */
.g-tools { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; }
.g-filters { display: flex; flex-wrap: wrap; gap: 8px; }
.g-filter {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  border-radius: 10px;
  background: var(--cream);
  font-weight: 800;
  white-space: nowrap;
  transition: background .3s var(--ease), color .3s var(--ease);
}
.g-filter:hover { background: var(--sun); }
.g-filter.active { background: var(--forest); color: #fff; }
.g-count { font-weight: 800; }

/* Toolbar */
.g-bar {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 20px;
  border-radius: 10px;
  background: var(--cream);
}
.g-bar-top { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; }
.g-bar .f-search { width: 360px; }
.g-bar .g-filter { background: #fff; }
.g-bar .g-filter:hover { background: var(--sun); }
.g-bar .g-filter.active { background: var(--forest); color: #fff; }

/* Letter cards */
.lcards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; align-items: start; }
.lcard {
  display: flex;
  flex-direction: column;
  border-radius: 10px;
  background: #fff;
  border: 1px solid var(--line);
  overflow: hidden;
  animation: fade-up .4s var(--ease);
}
.lcard.is-hidden { display: none; }
.lcard-head {
  position: relative;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px;
  background: var(--forest);
  color: #fff;
  overflow: hidden;
}
.lcard-head::after {
  content: attr(data-l);
  position: absolute;
  right: -6px;
  bottom: -34px;
  font-family: var(--font-head);
  font-size: 120px;
  font-weight: 600;
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(255, 255, 255, .1);
  pointer-events: none;
}
.lcard-letter {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 64px;
  height: 64px;
  border-radius: 10px;
  background: var(--sun);
  color: #000;
  font-family: var(--font-head);
  font-size: 30px;
  font-weight: 600;
}
.lcard-title { position: relative; display: flex; flex-direction: column; gap: 4px; flex: 1; min-width: 0; }
.lcard-title h2 { font-size: 20px; }
.lcard-say {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  align-self: flex-start;
  padding: 4px 10px 4px 4px;
  border-radius: 10px;
  background: rgba(255, 255, 255, .1);
  color: #fff;
  font-weight: 700;
  transition: background .3s var(--ease);
}
.lcard-say span:first-child { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 10px; background: var(--sun); color: #000; }
.lcard-say:hover { background: rgba(255, 255, 255, .2); }
.lcard-say.speaking span:first-child { animation: pulse .8s var(--ease) infinite; }
.lcard-chips { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; padding: 16px; }
.chip-ani {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px;
  border-radius: 10px;
  background: var(--cream);
  font-weight: 700;
  text-align: left;
  transition: background .3s var(--ease);
}
.chip-ani.is-hidden { display: none; }
.chip-ani .c-i { display: grid; place-items: center; flex-shrink: 0; width: 32px; height: 32px; border-radius: 10px; background: #fff; transition: background .3s var(--ease); }
.chip-ani .c-n { flex: 1; min-width: 0; line-height: 1.3; }
.chip-ani .c-b { display: block; font-size: 16px; font-weight: 600; }
.chip-ani b { font-weight: 800; box-shadow: inset 0 -6px 0 var(--sun); }
.chip-ani .c-s { opacity: .35; transition: opacity .3s var(--ease); }
.chip-ani:hover { background: var(--sun); }
.chip-ani:hover b { box-shadow: inset 0 -6px 0 #fff; }
.chip-ani:hover .c-s, .chip-ani.speaking .c-s { opacity: 1; }
.chip-ani.speaking { background: var(--sun); }
.lcard-foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 16px; border-top: 1px dashed var(--line); }
.lcard-dl {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px 6px 6px;
  border-radius: 10px;
  background: #000;
  color: #fff;
  font-weight: 800;
  transition: background .3s var(--ease), color .3s var(--ease);
}
.lcard-dl span { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 10px; background: var(--sun); color: #000; }
.lcard-dl:hover { background: var(--sun); color: #000; }
.lcard-dl:hover span { background: #000; color: #fff; }
.g-empty { padding: 24px; border-radius: 10px; background: var(--cream); font-weight: 700; }

@media (max-width: 1280px) {
  .lcards { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 1024px) {
  .group-page .lp-hero-inner { grid-template-columns: 1fr; }
  .g-bar .f-search { width: 100%; }
}
@media (max-width: 640px) {
  .az-panel { padding: 18px; gap: 16px; }
  .az-grid { grid-template-columns: repeat(7, 1fr); }
  .spot { display: grid; grid-template-columns: 56px 1fr 44px; align-items: center; gap: 12px 14px; padding: 14px; }
  .spot-letter { width: 56px; height: 56px; font-size: 28px; grid-column: 1; grid-row: 1; }
  .spot-body { display: contents; }
  .spot-label { grid-column: 2; grid-row: 1; }
  .spot-go { grid-column: 3; grid-row: 1; }
  .spot-chips { grid-column: 1 / -1; grid-row: 2; }
  .az-head h3 { font-size: 20px; }
  .lp-fact { padding: 10px; }
  .lp-fact strong { font-size: 18px; }
  .g-bar { padding: 14px; }
  .g-filters { flex-wrap: nowrap; overflow-x: auto; width: 100%; scrollbar-width: none; }
  .g-filters::-webkit-scrollbar { display: none; }
  .lcards { grid-template-columns: 1fr; gap: 16px; }
  .lcard-head { padding: 14px; gap: 12px; }
  .lcard-letter { width: 54px; height: 54px; font-size: 26px; }
  .lcard-title h2 { font-size: 18px; }
  .lcard-chips { padding: 12px; }
  .chip-ani { padding: 8px; gap: 8px; }
  .chip-ani .c-s { display: none; }
  .lcard-foot { padding: 12px; }
}

/* Printables gallery */
.pc-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.pc {
  display: flex;
  flex-direction: column;
  border-radius: 10px;
  background: var(--cream);
  overflow: hidden;
  animation: fade-up .4s var(--ease);
}
.pc.is-hidden { display: none; }
.pc-stage {
  position: relative;
  display: grid;
  place-items: center;
  padding: 56px 24px 24px;
  place-content: end center;
  background: var(--sun);
  overflow: hidden;
}
.pc-stage::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(0, 0, 0, .08) 1.2px, transparent 1.2px);
  background-size: 18px 18px;
}
.pc-sheet {
  position: relative;
  width: 74%;
  aspect-ratio: 612 / 792;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 18px 40px rgba(0, 0, 0, .18);
  transform: translateY(0);
  transition: transform .5s var(--ease);
}
.pc:hover .pc-sheet { transform: translateY(-4px); }
.pc-sheet svg { width: 100%; height: 100%; display: block; }
.pc-pages {
  position: absolute;
  z-index: 2;
  top: 12px;
  right: 12px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 10px;
  background: #000;
  color: #fff;
  font-weight: 800;
}
.pc-body { display: flex; flex-direction: column; gap: 6px; padding: 18px; flex: 1; }
.pc-body h3 { font-size: 20px; }
.pc-body h3 b { font-weight: 600; box-shadow: inset 0 -8px 0 var(--sun); }
.pc-foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 18px; border-top: 1px dashed var(--line); }

.howto { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.howto-step {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 24px;
  border-radius: 10px;
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .12);
  overflow: hidden;
}
.howto-n {
  position: absolute;
  right: 14px;
  top: 6px;
  font-family: var(--font-head);
  font-size: 56px;
  font-weight: 600;
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(255, 255, 255, .15);
}
.howto-step .hv-ico { color: #000; }
.howto-step h3 { font-size: 20px; }

@media (max-width: 1280px) {
  .pc-grid { grid-template-columns: repeat(3, 1fr); }
  .howto { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 1024px) {
  .pc-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .pc-grid { grid-template-columns: 1fr; gap: 16px; }
  .pc-stage { padding: 44px 16px 20px; }
  .pc-body { padding: 14px; }
  .pc-body h3 { font-size: 18px; }
  .pc-foot { padding: 12px; }
  .pc-sheet { width: 60%; }
  .pc-pages { top: 8px; right: 8px; padding: 2px 8px; }
  .howto { grid-template-columns: 1fr; }
}

/* Letter sounds cards */
.snd-rows { display: flex; flex-direction: column; gap: 10px; padding: 16px 16px 0; }
.snd-row { display: flex; align-items: flex-start; gap: 12px; padding: 12px; border-radius: 10px; background: var(--cream); }
.snd-ipa { display: grid; place-items: center; flex-shrink: 0; min-width: 52px; height: 52px; padding-inline: 8px; border-radius: 10px; background: var(--sun); font-family: var(--font-head); font-size: 22px; font-weight: 600; }
.snd-row div { display: flex; flex-direction: column; gap: 2px; }
.snd-row strong { font-weight: 800; }

/* Long words never spill out of their box */
.chip-ani, .spot-chip { min-width: 0; }
.chip-ani .c-n, .spot-chip span { min-width: 0; overflow-wrap: anywhere; hyphens: auto; }

.pc-more-wrap { display: none; justify-content: center; }
.pc-more-wrap.show { display: flex; }
.pc.is-more { display: none; }

/* Fun facts */
.fotd {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 24px;
  padding: 28px;
  border-radius: 10px;
  background: var(--sun);
  overflow: hidden;
}
.fotd::after {
  content: "?!";
  position: absolute;
  right: 120px;
  bottom: -40px;
  font-family: var(--font-head);
  font-size: 160px;
  font-weight: 600;
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 2px rgba(0, 0, 0, .08);
  pointer-events: none;
}
.fotd-l { display: grid; place-items: center; width: 88px; height: 88px; border-radius: 10px; background: #000; color: #fff; font-family: var(--font-head); font-size: 40px; font-weight: 600; }
.fotd-body { position: relative; display: flex; flex-direction: column; gap: 6px; }
.fotd-body span { font-weight: 800; }
.fotd-body p { font-size: 16px; }
.fotd-body h3 { font-size: 24px; }
.fotd .btn { position: relative; z-index: 1; }
.facts-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.fc {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 20px;
  border-radius: 10px;
  background: var(--cream);
  animation: fade-up .4s var(--ease);
}
.fc.is-hidden, .fc.is-more { display: none; }
.fc-top { display: flex; align-items: center; gap: 12px; }
.fc-l { display: grid; place-items: center; flex-shrink: 0; width: 44px; height: 44px; border-radius: 10px; background: var(--forest); color: #fff; font-family: var(--font-head); font-size: 20px; font-weight: 600; }
.fc-top div { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.fc-top h3 { font-size: 20px; overflow-wrap: anywhere; }
.fc-top h3 b { font-weight: 600; box-shadow: inset 0 -7px 0 var(--sun); }
.fc p { flex: 1; }
.fc-foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding-top: 12px; border-top: 1px dashed var(--line); }
.fc-foot > span { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; }
.fc .an-say { background: #fff; color: #000; }
.fc .an-say:hover, .fc .an-say.speaking { background: var(--sun); }
.more-wrap { display: flex; justify-content: center; }
.more-wrap[hidden] { display: none; }

@media (max-width: 1280px) { .facts-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) {
  .facts-grid { grid-template-columns: 1fr; }
  .fotd { grid-template-columns: 1fr; gap: 16px; padding: 22px; }
  .fotd-l { width: 64px; height: 64px; font-size: 30px; }
  .fotd::after { display: none; }
}

/* Quiz hub */
.mode-list { display: flex; flex-direction: column; gap: 10px; }
.mode-btn {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 14px;
  border-radius: 10px;
  background: var(--cream);
  text-align: left;
  transition: background .3s var(--ease), color .3s var(--ease);
}
.mode-btn .hv-ico { flex-shrink: 0; }
.mode-btn div { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.mode-btn strong { font-weight: 800; }
.mode-btn .m-go { display: grid; place-items: center; flex-shrink: 0; width: 36px; height: 36px; border-radius: 10px; background: #fff; transition: transform .4s var(--ease), background .3s var(--ease); }
.mode-btn:hover .m-go { transform: rotate(-45deg); background: var(--sun); }
.mode-btn.active { background: var(--forest); color: #fff; }
.mode-btn.active .m-go { background: var(--sun); color: #000; }
.quiz-mode { font-family: var(--font-head); font-size: 22px; font-weight: 600; }
.qz-letters { display: grid; grid-template-columns: repeat(13, 1fr); gap: 6px; }
@media (max-width: 640px) {
  .qz-letters { grid-template-columns: repeat(7, 1fr); }
}
.group-page #quiz .quiz-steps { flex-direction: row; flex-wrap: wrap; gap: 6px; }
.group-page #quiz .quiz-steps span { padding: 6px; }

/* Teachers & parents */
.tp-tabs { display: inline-flex; gap: 6px; padding: 6px; border-radius: 10px; background: var(--cream); align-self: flex-start; }
.tp-tab { display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; border-radius: 10px; font-weight: 800; transition: background .3s var(--ease), color .3s var(--ease); }
.tp-tab:hover { background: #fff; }
.tp-tab.active { background: var(--forest); color: #fff; }
.tp-panel { display: none; flex-direction: column; gap: 24px; animation: fade-up .45s var(--ease); }
.tp-panel.active { display: flex; }
.week { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; }
.day { display: flex; flex-direction: column; gap: 10px; padding: 20px; border-radius: 10px; background: var(--cream); }
.day-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.day-name { padding: 4px 10px; border-radius: 10px; background: var(--forest); color: #fff; font-weight: 800; }
.day-min { display: inline-flex; align-items: center; gap: 4px; font-weight: 700; }
.day h3 { font-size: 18px; }
.day a { align-self: flex-start; }
.tp-tips { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.tp-tip { display: flex; gap: 14px; align-items: flex-start; padding: 18px; border-radius: 10px; border: 1px solid var(--line); }
.tp-tip .hv-ico { flex-shrink: 0; }
.tp-tip div { display: flex; flex-direction: column; gap: 2px; }
.plan { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; }
.wk {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px;
  border-radius: 10px;
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .12);
  color: #fff;
  transition: background .3s var(--ease);
}
.wk:hover { background: rgba(255, 255, 255, .12); }
.wk-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.wk-l { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 10px; background: var(--sun); color: #000; font-family: var(--font-head); font-size: 22px; font-weight: 600; }
.wk-n { font-weight: 800; }
.wk strong { font-family: var(--font-head); font-size: 18px; font-weight: 600; overflow-wrap: anywhere; }
.wk-links { display: flex; gap: 6px; }
.wk-links a { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: rgba(255, 255, 255, .1); transition: background .3s var(--ease), color .3s var(--ease); }
.wk-links a:hover { background: var(--sun); color: #000; }
.ages { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.age { display: flex; flex-direction: column; gap: 14px; padding: 28px; border-radius: 10px; background: #fff; }
.age-top { display: flex; align-items: center; gap: 14px; }
.age-n { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 10px; background: var(--sun); font-family: var(--font-head); font-size: 26px; font-weight: 600; }
.age h3 { font-size: 22px; }
.age ul { display: flex; flex-direction: column; gap: 10px; list-style: none; }
.age li { display: flex; gap: 10px; align-items: flex-start; }
.age li .ic { color: var(--leaf); }

@media (max-width: 1280px) {
  .week { grid-template-columns: repeat(3, 1fr); }
  .plan { grid-template-columns: repeat(4, 1fr); }
  .tp-tips { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 1024px) {
  .ages { grid-template-columns: 1fr; }
  .plan { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 640px) {
  .tp-tabs { width: 100%; }
  .tp-tab { flex: 1; justify-content: center; padding: 10px; }
  .week, .tp-tips { grid-template-columns: 1fr; }
  .plan { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .age { padding: 22px; }
}
.hub-grid { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 1024px) { .hub-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .hub-grid { grid-template-columns: 1fr; } }

/* Printables by letter */
.bl-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.bl {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 16px;
  border-radius: 10px;
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .12);
  color: #fff;
}
.bl-top { display: flex; align-items: center; gap: 12px; }
.bl-l { display: grid; place-items: center; flex-shrink: 0; width: 56px; height: 56px; border-radius: 10px; background: var(--sun); color: #000; font-family: var(--font-head); font-size: 24px; font-weight: 600; }
.bl-top div { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.bl-top strong { font-family: var(--font-head); font-size: 20px; font-weight: 600; }
.bl-top span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bl-go { display: grid; place-items: center; flex-shrink: 0; width: 36px; height: 36px; border-radius: 10px; background: #fff; color: #000; transition: background .3s var(--ease), transform .4s var(--ease); }
.bl-go:hover { background: var(--sun); transform: rotate(-45deg); }
.bl-links { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.bl-links a {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 10px 6px;
  border-radius: 10px;
  background: rgba(255, 255, 255, .08);
  font-weight: 800;
  transition: background .3s var(--ease), color .3s var(--ease);
}
.bl-links a:hover { background: var(--sun); color: #000; }
@media (max-width: 1280px) { .bl-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 1024px) { .bl-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .bl-grid { grid-template-columns: 1fr; gap: 12px; } }