@media (max-width: 1100px) { body > header > section.site-stats > ul { grid-template-columns: repeat(2, minmax(0, 1fr)); } body > main > section > div.spotlight { grid-template-columns: 1fr; } body > main > section > div.spotlight > article, body > main > section > div.spotlight.spotlight-aside-first > article { grid-column: 1; grid-row: 1; } body > main > section > div.spotlight > aside, body > main > section > div.spotlight.spotlight-aside-first > aside:first-child { grid-column: 1; grid-row: 2; } body > main > section > div.spotlight > aside { border-left: 0; border-right: 0; border-top: 1px solid var(--color-border); padding-left: 0; padding-right: 0; padding-top: var(--space-4); } body > main > section > div.spotlight > aside > ol { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); } body > main > section > div.spotlight > aside > ol { gap: 0; } body > main > section > div.spotlight > aside > ol > li, body > main > section > div.spotlight > aside > ol > li:first-child { border-top: 0; padding-top: 0; } body > main.home-main > section.home-books > div { grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); justify-content: center; } body > main.home-main > section.home-books > div > section { max-width: 22rem; } body > main.home-main > section.home-rubrics > div { grid-template-columns: repeat(2, minmax(0, 1fr)); } body:has(> main.home-main > section.home-spotlight > div.spotlight > article) > main.home-main > section.home-deep > nav.articles-list > ol { grid-template-columns: repeat(2, minmax(0, 1fr)); } body:has(> main.home-main > section.home-spotlight > div.spotlight > article) > main.home-main > section.home-deep > nav.articles-list > ol > li { grid-column: auto; grid-row: auto; } body:has(> main.home-main > section.home-spotlight > div.spotlight > article) > main.home-main > section.home-deep > nav.articles-list > ol > li article figure { min-height: 12rem; } body:has(> main.home-main > section.home-spotlight > div.spotlight > article) > main.home-main > section.home-deep > nav.articles-list > ol > li article > p:nth-of-type(1) { display: block; } body > main.listing-page.listing-mode-spotlight > section.listing-articles > nav.articles-list > ol { grid-template-columns: repeat(2, minmax(0, 1fr)); } body > main.listing-page.listing-mode-spotlight > section.listing-articles > nav.articles-list > ol > li { grid-column: auto; grid-row: auto; } body > main.listing-page.listing-mode-spotlight > section.listing-articles > nav.articles-list > ol > li article figure { min-height: 12rem; } body > main.listing-page.listing-mode-spotlight > section.listing-articles > nav.articles-list > ol > li article > p:nth-of-type(1) { display: block; } body > main.listing-page.listing-mode-timeline > section.listing-timeline > ol > li > article { grid-template-columns: minmax(6.4rem, 8rem) minmax(0, 1fr); } body > main:has(> article:first-child):has(> aside) { grid-template-columns: 1fr; } body > main:has(> article:first-child):has(> aside) > article:first-child { width: 100%; } body > main:has(> article:first-child):has(> aside) > aside { border-top: 1px solid var(--color-border); padding-top: var(--space-4); } body > main.home-main:has(> section.home-spotlight > div.spotlight > article) > aside.home-watch > div { grid-template-columns: repeat(2, minmax(0, 1fr)); } body > footer > section:nth-of-type(1) > dl { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 800px) { body { font-size: var(--font-size-body-mobile); padding: var(--space-3); } body > main, body > footer { margin-bottom: var(--space-5); } body > header > section.site-stats > ul { grid-template-columns: 1fr; } body > header:has(> h1) > h1 { max-width: 100%; } main nav.articles-list > ol { grid-template-columns: 1fr; } body > main > section > div.spotlight > article figure { min-height: 14rem; } body > main > section > div.spotlight > article h3 { font-size: clamp(1.4rem, 8vw, 2.1rem); } body > main > section > div.spotlight > aside > ol { grid-template-columns: 1fr; } body > main.home-main > section.home-books > div > section figure { min-height: 0; width: min(11rem, 100%); } body > main.home-main > section.home-rubrics > div { grid-template-columns: 1fr; } body > main.home-main > section.home-rubrics > div > article > ul > li { grid-template-columns: 1fr; } body:has(> main.home-main > section.home-spotlight > div.spotlight > article) > main.home-main > section.home-deep > nav.articles-list > ol { grid-template-columns: 1fr; } body:has(> main.home-main > section.home-spotlight > div.spotlight > article) > main.home-main > section.home-deep > nav.articles-list > ol > li article figure { min-height: 10rem; } body > main.listing-page.listing-mode-spotlight > section.listing-articles > nav.articles-list > ol { grid-template-columns: 1fr; } body > main.listing-page.listing-mode-spotlight > section.listing-articles > nav.articles-list > ol > li article figure { min-height: 10rem; } body > main.listing-page.listing-mode-timeline > section.listing-timeline > ol::before { inset-inline-start: 0; } body > main.listing-page.listing-mode-timeline > section.listing-timeline > ol > li { padding-inline-start: var(--space-4); } body > main.listing-page.listing-mode-timeline > section.listing-timeline > ol > li::before { inset-inline-start: -0.35rem; } body > main.listing-page.listing-mode-timeline > section.listing-timeline > ol > li > article { grid-template-columns: 1fr; } body > main.listing-page.listing-mode-timeline > section.listing-timeline > ol > li > article > a > figure { min-height: 9rem; } body > main.home-main:has(> section.home-spotlight > div.spotlight > article) > aside.home-watch > div { grid-template-columns: 1fr; } body > main.home-main:has(> section.home-spotlight > div.spotlight > article) > aside.home-watch > div > article { grid-template-columns: 1fr; } body > main.home-main:has(> section.home-spotlight > div.spotlight > article) > aside.home-watch > div > article > a > figure { min-height: 0; } body > main:has(> article:first-child):has(> aside) > article:first-child { font-size: 1.14rem; line-height: 1.82; } body > main:has(> article:first-child):has(> aside) > article:first-child > * { max-width: 100%; } body > footer { padding-top: var(--space-3); padding-inline: var(--space-1); gap: var(--space-2); } body > footer > section:nth-of-type(1) > dl { grid-template-columns: 1fr; } body > footer > section:nth-of-type(1) > dl > div { border-left: 0; border-top: 1px solid var(--color-border); padding-left: 0; padding-top: var(--space-1); } body > footer > section:nth-of-type(1) > dl > div:first-child { border-top: 0; padding-top: 0; } }