@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;
    }

    main nav.articles-list > ol > li {
        grid-column: auto;
        grid-row: auto;
    }

    main nav.articles-list figure {
        min-height: 0;
        width: 100%;
    }

    main nav.articles-list figure img {
        height: auto;
    }

    body > main > section > div.spotlight {
        display: grid;
        grid-template-columns: 1fr;
        gap: var(--space-4);
    }

    body > main > section > div.spotlight > aside,
    body > main > section > div.spotlight.spotlight-aside-first > aside:first-child {
        display: none;
    }

    body > main > section > div.spotlight > article,
    body > main > section > div.spotlight.spotlight-aside-first > article,
    body > main > section > div.spotlight:has(> aside > ol > li:is(:hover, :focus-within)) > article {
        display: block;
        grid-column: auto;
        grid-row: auto;
    }

    body > main > section > div.spotlight > article {
        border-top: 1px solid var(--color-border);
        padding-top: var(--space-3);
    }

    body > main > section > div.spotlight > article:first-of-type {
        border-top: 0;
        padding-top: 0;
    }

    body > main > section > div.spotlight > article figure {
        min-height: 0;
    }

    body > main > section > div.spotlight > article h3 {
        font-size: clamp(1.4rem, 8vw, 2.1rem);
    }

    body > main > section > div.spotlight > article figure img {
        height: auto;
    }

    body > main.home-main > section.home-critiques-category > div.spotlight-block.spotlight,
    body > main.home-main > section.home-critiques-category > div.spotlight-block.spotlight.spotlight-aside-first {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: var(--space-4) !important;
    }

    body > main.home-main > section.home-critiques-category > div.spotlight-block.spotlight > aside.spotlight-feed,
    body > main.home-main > section.home-critiques-category > div.spotlight-block.spotlight.spotlight-aside-first > aside.spotlight-feed {
        display: none !important;
    }

    body > main.home-main > section.home-critiques-category > div.spotlight-block.spotlight > article.card,
    body > main.home-main > section.home-critiques-category > div.spotlight-block.spotlight.spotlight-aside-first > article.card {
        display: block !important;
        grid-column: auto !important;
        grid-row: auto !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    body > main.home-main > section.home-critiques-category > div.spotlight-block.spotlight > article.card figure,
    body > main.home-main > section.home-critiques-category > div.spotlight-block.spotlight.spotlight-aside-first > article.card figure {
        min-height: 0 !important;
        width: 100% !important;
    }

    body > main.home-main > section.home-critiques-category > div.spotlight-block.spotlight > article.card figure img,
    body > main.home-main > section.home-critiques-category > div.spotlight-block.spotlight.spotlight-aside-first > article.card figure img {
        height: auto !important;
    }

    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,
    body > main.home-main > section.home-deep > nav.articles-list > ol {
        grid-template-columns: 1fr !important;
    }

    body:has(> main.home-main > section.home-spotlight > div.spotlight > article) > main.home-main > section.home-deep > nav.articles-list > ol > li:nth-child(n),
    body > main.home-main > section.home-deep > nav.articles-list > ol > li:nth-child(n) {
        grid-column: auto !important;
        grid-row: auto !important;
    }

    body:has(> main.home-main > section.home-spotlight > div.spotlight > article) > main.home-main > section.home-deep > nav.articles-list > ol > li:nth-child(n) article figure,
    body > main.home-main > section.home-deep > nav.articles-list > ol > li:nth-child(n) article figure {
        min-height: 0 !important;
    }

    body > main.listing-page.listing-mode-spotlight > section.listing-articles > nav.articles-list > ol,
    body > main.listing-page > section.listing-articles > nav.articles-list > ol {
        grid-template-columns: 1fr !important;
    }

    body > main.listing-page.listing-mode-spotlight > section.listing-articles > nav.articles-list > ol > li:nth-child(n),
    body > main.listing-page > section.listing-articles > nav.articles-list > ol > li:nth-child(n) {
        grid-column: auto !important;
        grid-row: auto !important;
    }

    body > main.listing-page.listing-mode-spotlight > section.listing-articles > nav.articles-list > ol > li:nth-child(n) article figure,
    body > main.listing-page > section.listing-articles > nav.articles-list > ol > li:nth-child(n) article figure {
        min-height: 0 !important;
    }

    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: 0;
    }

    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;
    }

}

@media (max-width: 480px) {
    body {
        font-size: 1.0625rem;
        padding: var(--space-2);
    }

    body > header > section:first-of-type > a {
        gap: var(--space-2);
    }

    body > header > section:first-of-type > a img {
        width: 2.8rem;
    }

    body > header > section:first-of-type > a strong {
        font-size: clamp(1.3rem, 6.5vw, 1.85rem);
        letter-spacing: 0.02em;
    }

    body > header:has(> h1) > h1 {
        font-size: clamp(1.6rem, 8.2vw, 2.25rem);
    }

    .article-header > h1 {
        font-size: clamp(1.4rem, 7.6vw, 2rem);
        line-height: 1.08;
        margin-top: var(--space-4);
        margin-bottom: var(--space-4);
    }

    body > main > section > div.spotlight > article figure {
        min-height: 11.5rem;
    }

    body > main > section > div.spotlight > article h3 {
        font-size: clamp(1.22rem, 8vw, 1.72rem);
    }

    body > main > section > div.spotlight > article > p:nth-of-type(1),
    body > main.listing-page > section.listing-articles > nav.articles-list > ol > li article > p:nth-of-type(1) {
        font-size: 1.04rem;
    }

    main nav.articles-list h3 {
        font-size: clamp(1.12rem, 6.5vw, 1.52rem);
    }

    body > main:has(> article:first-child):has(> aside) > article:first-child {
        font-size: 1.06rem;
        line-height: 1.72;
    }

    body > main:has(> article:first-child):has(> aside) > article:first-child > p {
        text-align: left;
    }

    body > main:has(> article:first-child):has(> aside) > article:first-child > :not(figure):not(table):not(pre):not(.highlight):not(section.article-books) {
        max-width: 100%;
    }

    body > main.home-main > section.home-rubrics > div > article > header {
        align-items: flex-start;
        flex-direction: column;
    }

    body > main.home-main > section.home-rubrics > div > article > ul > li > time,
    body > main.home-main > section.home-rubrics > div > article > header > p {
        white-space: normal;
    }

    body:has(> header.article-header) > main > aside.article-toc {
        inset-inline-end: var(--space-2);
        inset-block-start: auto;
        inset-block-end: var(--space-2);
        transform: none;
        flex-direction: row;
        align-items: flex-end;
        gap: var(--space-2);
        z-index: 40;
    }

    body:has(> header.article-header) > main > aside.article-toc > details.article-toc-drawer > summary.ui-button--vertical {
        width: auto;
        min-height: 2.35rem;
        padding: 0.45rem 0.72rem;
        font-size: 0.74rem;
        letter-spacing: 0.05em;
    }

    body:has(> header.article-header) > main > aside.article-toc > details.article-toc-drawer > summary.ui-button--vertical > span {
        transform: none;
        white-space: normal;
    }

    body:has(> header.article-header) > main > aside.article-toc > details.article-toc-drawer > .article-toc-drawer-panel {
        inset-inline-end: 0;
        inset-block-start: auto;
        inset-block-end: calc(100% + var(--space-2));
        transform: none;
        width: min(22rem, calc(100vw - (2 * var(--space-2))));
        max-height: min(68vh, 31rem);
    }

    body:has(> header.article-header) > main > article {
        padding-bottom: 3.8rem;
    }
}