/* ==========================================================================
   Pet Saze — magazine
   Loaded on everything that is not the shop. v2 drops the warm/cool split —
   the whole site is one white sheet, and the warm ground is kept for the two
   places it still carries meaning: the announce strip and the in-article
   shop rail, both of which are the shop speaking inside the magazine.
   ========================================================================== */

/* ----------------------------------------------------------- Page heading */

.page-head { padding-block: var(--s3) var(--s6); max-width: var(--wrap-read); }
.page-head h1 { margin: 0 0 var(--s3); }
.page-head__desc { color: var(--ink-soft); }
.page-head__count { margin: 0; color: var(--ink-muted); font-size: var(--t-sm); }

/* The term description, under the articles.

   It used to sit between the heading and the grid, where several hundred words
   of search copy pushed the first article most of a screen down the page whose
   only job is to list articles. Down here it is still in the document — which
   is all a search engine needs — and clamped to three lines, so a reader who
   wants it opens it and a reader who does not never scrolls past it. */
.termnote {
  margin-top: var(--s8);
  padding-top: var(--s6);
  border-top: 1px solid var(--line);
}
.termnote__body { color: var(--ink-soft); font-size: var(--t-sm); line-height: 2; }
.termnote__body > *:first-child { margin-top: 0; }
.termnote__body > *:last-child { margin-bottom: 0; }
.termnote__body h2,
.termnote__body h3 {
  font-size: var(--t-md);
  font-weight: 700;
  color: var(--ink);
  margin: var(--s5) 0 var(--s2);
}
/* Clamped rather than max-height'd: a height guess either cuts a line in half
   or leaves a gap, and line-clamp counts the lines the browser actually drew. */
.termnote__body[data-clamp] {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.termnote__body.is-open {
  display: block;
  -webkit-line-clamp: none;
  line-clamp: none;
  overflow: visible;
}
.termnote__more {
  margin-top: var(--s3);
  padding: 0;
  border: 0;
  background: none;
  color: var(--brand-ink);
  font: inherit;
  font-size: var(--t-xs);
  font-weight: 700;
  cursor: pointer;
}
.termnote__more:hover { text-decoration: underline; }

.empty {
  padding: var(--s7);
  text-align: center;
  color: var(--ink-muted);
  background: var(--mist);
  border-radius: var(--r-card);
}

/* --------------------------------------------------------------- The card */

/* A post card is a rectangle. The arch is reserved for doorways into a
   section; an article is a destination, not a doorway. */
.pcard { display: flex; flex-direction: column; min-width: 0; }
.pcard__media {
  display: block;
  aspect-ratio: 302 / 166;
  border-radius: var(--r-card);
  overflow: hidden;
  background: var(--mist);
}
.pcard__media img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .4s ease;
}
.pcard:hover .pcard__media img { transform: scale(1.04); }
.pcard__body { padding-top: var(--s3); }
.pcard__cat {
  display: inline-block;
  margin-bottom: var(--s1);
  font-size: var(--t-xxs);
  line-height: 1.818;
  font-weight: 500;
  color: var(--brand-ink);
  text-decoration: none;
}
.pcard__cat:hover { text-decoration: underline; }
.pcard__title {
  font-size: var(--t-md);
  line-height: 1.875;
  font-weight: 500;
  margin: 0 0 var(--s2);
}
.pcard__title a { text-decoration: none; }
.pcard__title a:hover { text-decoration: underline; text-decoration-color: var(--brand); }
.pcard__meta {
  display: flex; align-items: center; gap: var(--s2);
  margin: 0;
  font-size: var(--t-xxs);
  line-height: 1.818;
  color: var(--ink-muted);
}

/* ------------------------------------------------------------ Hub archive */

/* The two top-level categories are the pages this site should rank with, so
   the paths into their subcategories are a designed row, not a sidebar list.
   A subcategory with no articles yet says «به‌زودی» rather than lying with a
   zero — and it stays clickable, so the gap is visible to the team. */
.paths {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s3);
  padding: var(--s5);
  margin-bottom: var(--s6);
  background: var(--mist);
  border-radius: var(--r-card);
}
.paths__item {
  display: inline-flex;
  align-items: center;
  gap: var(--s3);
  padding: var(--s3) var(--s4);
  background: var(--paper);
  border: 1px solid transparent;
  border-radius: var(--r-pill);
  text-decoration: none;
  font-size: var(--t-sm);
  font-weight: 700;
}
.paths__item:hover { border-color: var(--ink); }
.paths__count { color: var(--ink-muted); font-weight: 400; }
.paths__item.is-empty { opacity: .6; }
.paths__item.is-empty .paths__count { color: var(--brand-ink); }

/* ---------------------------------------------------------- The article */

/* The page frames on the same 1440 container as the rest of the site; the
   measure is held by capping the text column at 800, not by narrowing the
   page. `space-between` pushes the two tracks out to the gutters, so the
   article lines up with the header and footer above and below it. */
/* The rail is a fixed 300; everything the container has left over goes to the
   article, less one gap. The gap used to absorb 180px of that on a wide screen
   because the two tracks were pushed apart to the gutters — width that belongs
   to the text. */
.article__layout {
  display: grid;
  gap: var(--s6);
  align-items: start;
}
/* Below the two-column breakpoint the article is alone in a full-width track
   but still capped at its measure, so it has to be centred — left flush, it
   sat against the right gutter with a strip of empty page beside it. */
/* The body ends flush with its own box, so the last paragraph sat 48px from
   the product rail — a long read needs somewhere to land before the page
   starts selling. */
.article__main { min-width: 0; max-width: 800px; margin-inline: auto; padding-bottom: var(--s7); }
.article__aside { min-width: 0; }

/* The headline tracks the text column at every width, not just the two-column
   one — below the breakpoint the article is capped and centred, so a headline
   left spanning the whole container sat wider than the piece it names. */
.article .crumbs,
.article__head { max-width: 800px; margin-inline: auto; }

@media (min-width: 1100px) {
  /* The rail takes the first column, which in RTL is the right-hand one; the
     article takes the second and is given the whole remainder. */
  .article__layout { grid-template-columns: 300px minmax(0, 1fr); }
  .article__aside { grid-column: 1; grid-row: 1; }
  .article__main {
    grid-column: 2;
    grid-row: 1;
    max-width: none;
    margin-inline: 0;
  }

  /* The rail box is stretched to the full row so the contents list below has
     somewhere to travel. Its own children still pack to the top — see
     align-content on .article__aside — so the stretch adds empty space under
     them, not gaps between them. */
  .article__aside { align-self: stretch; }

  /* The headline sits over the article, not over the whole page: same width as
     the text column and pushed to the same side. `margin-inline-start: auto`
     puts the slack on the leading side, which in RTL is the right — where the
     rail is. Physical properties would need two rules and one of them would be
     wrong the moment anything renders LTR. */
  .article .crumbs,
  .article__head {
    max-width: calc(100% - 300px - var(--s6));
    /* start auto, end zero: the slack goes to the leading side, which in RTL
       is the right — the side the rail is on. */
    margin-inline: auto 0;
  }
}

/* The rail used to hold only the contents list, so the grid collapsed to one
   column whenever the script hid it. It now carries the most-read articles and
   the subjects as well, which are there on every article, so the two columns
   stand whatever the contents list decides to do. */

.article__aside { display: grid; gap: var(--s5); align-content: start; }

/* Not sticky, deliberately. The rail measures about 1190px with the contents
   list, five articles and eight subjects in it — taller than a laptop
   viewport — so pinning it would fix its top and put its last block
   permanently out of reach. Sticking only the contents list instead would
   slide it down over the two blocks under it. A rail with real content in it
   is a column, not a floating panel. */

/* --------------------------------------------------------- rail widgets */

.widget {
  padding: var(--s4);
  background: var(--mist);
  border-radius: var(--r-card);
}
.widget__title {
  margin: 0 0 var(--s3);
  font-size: var(--t-xs);
  line-height: 1.846;
  font-weight: 700;
  color: var(--ink);
}

.sidelist { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--s3); }
.sidelist__item + .sidelist__item { border-top: 1px solid var(--line); padding-top: var(--s3); }
.sidelist__link {
  display: flex;
  align-items: flex-start;
  gap: var(--s3);
  text-decoration: none;
  color: var(--ink);
}
.sidelist__thumb { flex: none; width: 56px; height: 56px; border-radius: 8px; overflow: hidden; }
.sidelist__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* min-width on the text side, or a long unbroken title stretches the flex row
   past the rail and takes the whole grid column with it. */
.sidelist__text { min-width: 0; display: grid; gap: 2px; }
.sidelist__title {
  font-size: var(--t-xs);
  line-height: 1.692;
  font-weight: 500;
  /* Two lines, then an ellipsis: the rail is a list of choices, not a place
     to read a headline in full. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.sidelist__link:hover .sidelist__title { color: var(--brand-ink); }
.sidelist__meta { font-size: var(--t-xxs); color: var(--ink-muted); }

.sidecats { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--s1); }
.sidecats a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s3);
  padding: var(--s2) 0;
  font-size: var(--t-xs);
  line-height: 1.846;
  color: var(--ink-soft);
  text-decoration: none;
}
.sidecats a:hover { color: var(--brand-ink); }
.sidecats__count {
  flex: none;
  color: var(--ink-muted);
  font-variant-numeric: tabular-nums;
}

.article__head { padding-block: var(--s3) var(--s5); }
.article__eyebrow {
  display: inline-block;
  margin-bottom: var(--s1);
  color: var(--brand-ink);
  font-size: .75rem;
  line-height: 1.833;
  font-weight: 500;
  text-decoration: none;
}
.article__eyebrow:hover { text-decoration: underline; }
.article__title {
  font-size: 1.875rem;    /* 30 */
  line-height: 1.4;       /* /42 */
  margin: 0 0 var(--s4);
}
.article__meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2);
  color: var(--ink-muted);
  font-size: .75rem;
  line-height: 1.833;
}
.article__author { font-weight: 400; color: var(--ink-muted); }
.dot { color: var(--line); }

.article__hero { margin: 0 0 var(--s7); }
.article__hero img {
  width: 100%;
  border-radius: 12px;
  aspect-ratio: 720 / 400;
  object-fit: cover;
}

/* Table of contents — built by JS from the article's own headings, so there
   is nothing for an author to maintain. It removes itself under 3 headings. */
.toc {
  padding: var(--s4);
  margin-bottom: var(--s6);
  background: var(--mist);
  border-radius: var(--r-card);
}
.toc__title {
  font-size: var(--t-xs);
  line-height: 1.846;
  font-weight: 500;
  margin: 0 0 var(--s2);
}
.toc__list { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--s2); }
.toc__item--h3 { padding-inline-start: var(--s5); }
.toc a {
  font-size: .75rem;
  line-height: 1.833;
  text-decoration: none;
  color: var(--ink-muted);
  border-inline-start: 2px solid transparent;
  padding-inline-start: var(--s2);
  display: block;
}
.toc a:hover { color: var(--ink); }
.toc a.is-current { color: var(--ink); border-inline-start-color: var(--brand); }

@media (min-width: 1100px) {
  /* The contents list follows the reader. It is the last block in the rail, so
     there is nothing under it for it to slide over as it travels — which is
     exactly why it is last. It sticks inside the stretched rail box, so it
     keeps up for the length of the article rather than for the length of the
     three widgets. */
  .toc {
    position: sticky;
    top: calc(var(--header-h) + var(--s4));
    margin-bottom: 0;
  }
}

/* --------------------------------------------------------------- Prose */

/* Persian body copy needs air: 1.9 leading and a measure that does not run
   past ~75 characters. */
.prose { font-size: var(--t-md); line-height: 1.875; color: var(--ink-soft); }
.prose > * + * { margin-top: var(--s5); }
.prose h2 {
  font-size: var(--t-xl);
  line-height: 1.455;
  font-weight: 500;
  color: var(--ink);
  margin-top: var(--s8);
  scroll-margin-top: calc(var(--header-h) + var(--s5));
}
.prose h3 {
  font-size: 1.125rem;
  line-height: 1.667;
  font-weight: 500;
  color: var(--ink);
  margin-top: var(--s7);
  scroll-margin-top: calc(var(--header-h) + var(--s5));
}
.prose p { margin-block: 0; }
.prose a { color: var(--brand-ink); font-weight: 500; }
.prose img, .prose figure { border-radius: var(--r-card); overflow: hidden; }
.prose figcaption {
  margin-top: var(--s2);
  font-size: var(--t-sm);
  color: var(--ink-muted);
  text-align: center;
}
.prose ul, .prose ol { padding-inline-start: 1.5em; }
.prose li + li { margin-top: var(--s2); }
.prose blockquote {
  margin: var(--s6) 0;
  padding: var(--s5);
  border-inline-start: 3px solid var(--brand);
  background: var(--brand-surface);
  border-radius: var(--r-card);
  font-size: var(--t-md);
}
.prose blockquote p:last-child { margin-bottom: 0; }
.prose table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--t-md);
  display: block;
  overflow-x: auto;
}
.prose th, .prose td { padding: var(--s3); border: 1px solid var(--line); text-align: start; }
.prose th { background: var(--mist); font-weight: 500; }
.prose code {
  background: var(--mist);
  padding: 2px 6px;
  border-radius: 6px;
  font-size: .9em;
}

.article__tags { margin-top: var(--s6); font-size: var(--t-sm); }
.article__tags-label { color: var(--ink-muted); }
.article__tags a {
  display: inline-block;
  margin-inline-end: var(--s2);
  padding: 2px var(--s3);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  text-decoration: none;
}
.article__tags a:hover { border-color: var(--ink); }

/* ------------------------------------------------ The bridge: product rail */

/* Products inside an article. This is the one place the magazine sells, so
   it is labelled honestly — «از فروشگاه پت‌سازه» — rather than disguised as
   editorial. It renders nothing at all when nothing matches. */
.rail {
  margin-block: var(--s7);
  padding: var(--s5);
  background: var(--brand-surface);
  border-radius: var(--r-block);
}
.rail__head { margin-bottom: var(--s4); }
.rail__title {
  font-size: var(--t-lg);
  line-height: 1.867;
  font-weight: 500;
  margin: 0;
}
.rail__note {
  margin: 0;
  font-size: .75rem;
  line-height: 1.833;
  color: var(--ink-soft);
}
/* Four across, the same row the article listings use, because the rail now
   runs the full container rather than sitting inside the text column. */
.rail__items {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--s4);
}
/* The cards inside sit on white so they read as objects on the warm ground,
   not as holes cut out of it. */
.rail__items > * {
  background: var(--paper);
  border-radius: 8px;
  padding: var(--s3);
}
/* Four to two, not four to three. The rail holds exactly four cards, so a
   three-column step would leave the fourth alone on a row of its own — the
   same orphan this block already had once. With four items the only counts
   that fill every row are four, two and one. */
@media (max-width: 1000px) {
  .rail__items { grid-template-columns: repeat(2, 1fr); }
}

/* ------------------------------------------------------------ Pagination */

.pagination { margin-top: var(--s8); }
.pagination .nav-links {
  display: flex; flex-wrap: wrap; gap: var(--s2); justify-content: center; align-items: center;
}
.pagination .page-numbers {
  display: inline-flex; align-items: center; gap: var(--s2);
  min-width: 40px; min-height: 40px;
  padding: 0 var(--s3);
  justify-content: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  text-decoration: none;
  font-size: var(--t-xs);
  font-weight: 500;
  color: var(--ink-soft);
}
.pagination .page-numbers:hover { border-color: var(--ink-muted); color: var(--ink); }
/* The current page is the orange fill with a charcoal number — the same
   contrast pairing every other orange surface uses. */
.pagination .page-numbers.current {
  background: var(--brand);
  border-color: var(--brand);
  color: var(--ink);
}
.pagination .dots { border-color: transparent; }

/* --------------------------------------------------------------- 404 */

.notfound { padding-block: var(--s9); text-align: center; }
.notfound__code {
  font-size: var(--t-4xl);
  font-weight: 700;
  color: var(--brand-ink);
  margin: 0 0 var(--s3);
}
.notfound__actions {
  display: flex; flex-wrap: wrap; gap: var(--s3); justify-content: center;
  margin-top: var(--s5);
}
.notfound .searchform { max-width: 420px; margin-inline: auto; }

/* -------------------------------------------------------------- Results */

.results + .results { margin-top: var(--s8); }

/* Images pasted into the classic editor arrive with their own widths and
   alignments. Keep them inside the measure and centred, so a 300px upload
   does not sit stranded against one edge of a 720px column. */
.prose img {
  width: 100%;
  height: auto;
  margin-inline: auto;
  border-radius: var(--r-card);
}
.prose .alignleft,
.prose .alignright,
.prose .aligncenter,
.prose .alignnone {
  display: block;
  float: none;
  margin-inline: auto;
}
.prose .wp-caption { width: auto !important; max-width: 100%; }
.prose iframe, .prose video {
  width: 100%;
  aspect-ratio: 16 / 9;
  height: auto;
  border-radius: var(--r-card);
}

/* ==========================================================================
   Front-page magazine block

   Three densities of the same card, deliberately: one article gets an image
   and a paragraph, two get a title and a thumbnail, three get just a title.
   That hierarchy is the editorial judgement — it says which of six articles
   matters most — and a uniform grid of six would throw that away.

   Sizes come from the approved design at 1440: lead 620, mid 340, small 256,
   which is 1216 plus two 32px gutters inside the 1280 container.
   ========================================================================== */

.mag__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--s5);
  margin-bottom: var(--s5);
}

.mag__title { margin: 0; font-size: var(--t-3xl); line-height: 1.375; }
.mag__count {
  margin: var(--s2) 0 0;
  color: var(--ink-muted);
  font-size: var(--t-xs);
  line-height: 1.769;
}

/* ------------------------------------------------------------ tabs, chips */

.mag__tabs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2);
  margin-bottom: var(--s3);
}

.mag__tab {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  padding: var(--s2) var(--s4);
  min-height: 40px;
  border-radius: var(--r-pill);
  color: var(--ink);
  font-size: var(--t-sm);
  line-height: 1.857;
  font-weight: 500;
  text-decoration: none;
  border: 1px solid transparent;
}

.mag__tab:hover { background: var(--mist); }

.mag__tab.is-active {
  background: var(--ink);
  color: #fff;
}

/* A hub with nothing in it yet is not a link and does not pretend to be one.
   It reads as a plan rather than a dead end — see «به‌زودی» in the markup. */
.mag__tab--soon {
  color: var(--ink-muted);
  border-color: var(--line);
  font-size: .75rem;
  font-weight: 400;
  cursor: default;
}

.mag__tab-n {
  font-size: var(--t-xs);
  opacity: .75;
  font-weight: 400;
}

.mag__chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2);
  margin-bottom: var(--s7);
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px var(--s3);
  min-height: 32px;
  border: 1px solid transparent;
  border-radius: var(--r-pill);
  background: var(--mist);
  color: var(--ink-soft);
  font-size: .75rem;
  line-height: 1.833;
  text-decoration: none;
}

.chip:hover { background: var(--brand-surface); color: var(--ink); }
.chip__n { color: var(--ink-muted); }

/* ------------------------------------------------------------------- rule */

/* A heading with a short charcoal bar underneath it. The bar belongs to the
   heading, not to the section, so it is 96px and stops — it never runs to the
   far edge and turns into a divider. */
.mag__rule {
  margin: 0 0 var(--s5);
  font-size: 1.25rem;     /* 20 */
  line-height: 1.4;       /* /28 */
  font-weight: 500;
}

.mag__rule::after {
  content: '';
  display: block;
  width: 96px;
  height: 2px;
  margin-top: 6px;
  background: var(--ink);
}

/* --------------------------------------------------------------- featured */

.mag__feature {
  display: grid;
  grid-template-columns: 620fr 340fr 256fr;
  gap: var(--s6);
  align-items: start;
  padding-bottom: var(--s8);
  margin-bottom: var(--s8);
  border-bottom: 1px solid var(--line);
}

.mag__mids,
.mag__smalls {
  display: flex;
  flex-direction: column;
  gap: var(--s5);
}

.feat__cat {
  display: inline-block;
  margin-bottom: 6px;
  color: var(--accent-ink);
  font-size: var(--t-xs);
  font-weight: 700;
  text-decoration: none;
}

.feat__title { margin: 0; font-size: var(--t-md); line-height: 1.75; }
.feat__title--lead { font-size: var(--t-2xl); line-height: 1.5; }
.feat__title--sm { font-size: var(--t-sm); }

.feat__title a { color: var(--ink); text-decoration: none; }
.feat__title a:hover { text-decoration: underline; }

.feat__excerpt {
  margin: var(--s3) 0 0;
  color: var(--ink-soft);
  line-height: 1.9;
}

.feat__byline {
  margin: var(--s2) 0 0;
  color: var(--ink-muted);
  font-size: var(--t-xs);
}

.feat__media {
  display: block;
  margin-bottom: var(--s4);
  border-radius: var(--r-card);
  overflow: hidden;
  aspect-ratio: 620 / 300;
  background: var(--mist);
}

.feat__media img { width: 100%; height: 100%; object-fit: cover; display: block; }

.feat--mid,
.feat--sm { display: flex; gap: var(--s4); align-items: flex-start; }

.feat__text { flex: 1; min-width: 0; }

.feat__thumb {
  flex: none;
  width: 120px;
  aspect-ratio: 120 / 110;
  border-radius: var(--r-sm);
  overflow: hidden;
  background: var(--mist);
}

.feat__thumb--sm { width: 84px; aspect-ratio: 84 / 74; }
.feat__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ---------------------------------------------------------- two-column tail */

.mag__columns {
  display: grid;
  grid-template-columns: 872fr 376fr;
  gap: var(--s7);
  align-items: start;
}

.picks {
  list-style: none;
  margin: 0;
  padding: 0;
}

.picks__item {
  display: flex;
  gap: var(--s4);
  align-items: baseline;
  padding-block: var(--s4);
  border-bottom: 1px solid var(--line);
}

.picks__item:last-child { border-bottom: 0; }

/* The numeral is decoration for a sighted reader and noise for a screen
   reader, which already gets the ordinal from the <ol>. Hence aria-hidden in
   the markup and a muted, oversized figure here. */
.picks__n {
  flex: none;
  width: 2.2rem;
  font-size: var(--t-2xl);
  font-weight: 700;
  color: var(--line);
  line-height: 1;
}

.picks__body { display: block; }

.picks__title {
  display: block;
  color: var(--ink);
  font-weight: 700;
  line-height: 1.75;
  text-decoration: none;
}

.picks__title:hover { text-decoration: underline; }

.picks__meta {
  display: block;
  margin-top: 4px;
  color: var(--ink-muted);
  font-size: var(--t-xs);
}

/* ----------------------------------------------------------------- mobile */

@media (max-width: 1080px) {
  .mag__feature { grid-template-columns: 1fr 1fr; }
  .mag__smalls { grid-column: 1 / -1; }
  .mag__columns { grid-template-columns: 1fr; gap: var(--s8); }
}

@media (max-width: 720px) {
  .mag__feature { grid-template-columns: 1fr; gap: var(--s5); }
  .mag__head { flex-direction: column; align-items: flex-start; gap: var(--s3); }
  .mag__title { font-size: var(--t-2xl); }
  .feat__title--lead { font-size: var(--t-xl); }
  .grid--2 { grid-template-columns: 1fr; }
}