@media (max-width: 930px) { // ---- HEADER ---- body > header { padding: 1rem var(--padding-body); ul { flex-wrap: wrap; justify-content: center; gap: 0.25rem 0.5rem; li:first-child { width: 100%; text-align: center; font-size: 1.25rem; margin-bottom: 0.5rem; } li:not(:first-child) { font-size: 0.75rem; } } } // ---- HERO ---- section#hero { height: auto; min-height: 60vh; text-align: center; align-items: center; padding: 4rem var(--padding-body) 3rem; .title { font-size: 4rem; } .subtitle { margin-bottom: 2rem; } #preorder-button { position: static; } } // ---- QUOTES ---- section#quote-full, section#quote { padding: 4rem var(--padding-body); blockquote { font-size: 1.5rem; } } // ---- THE BOOK ---- section#the-book { padding: 4rem var(--padding-body); .summary-wrapper { grid-template-columns: 1fr; gap: 2rem; .title-wrapper .title { font-size: 2.5rem; } } .data-wrapper { flex-wrap: wrap; gap: 1.5rem; justify-content: center; .data { width: 40%; } } .claim-wrapper { grid-template-columns: 1fr; gap: 2rem; img { border-radius: var(--radius-section); } .text .big { font-size: 1.75rem; } } } // ---- EXCERPTS ---- section#excerpts { padding: 4rem var(--padding-body); header .title { font-size: 2.5rem; } .swiper-slide .item { width: 100%; max-width: 20rem; text-align: center; } } // ---- HANDLES ---- section#handles { margin: 3rem var(--padding-body); header { flex-direction: column; align-items: flex-start; gap: 1rem; .title-wrapper .title { font-size: 2.5rem; } .subtitle { margin-right: 0; } } .path { width: 100%; margin-top: 3rem; .step { width: 100%; } .step:nth-child(even) { margin-left: 0; } } } // ---- SYSTEM ---- section#system { flex-direction: column; margin: 3rem var(--padding-body); gap: 3rem; .text { max-width: 100%; height: auto; .title { font-size: 2.5rem; } .bottom { margin-top: 2rem; } } figure { width: 100%; height: auto; } } // ---- EXCERPT (single) ---- section#excerpt { padding: 4rem var(--padding-body); .wrapper { width: 100%; .chapter-title { font-size: 2rem; } } } // ---- AUTHOR ---- section#author { flex-direction: column; padding: 4rem var(--padding-body); align-items: center; img { width: 100%; height: auto; margin-right: 0; margin-bottom: 3rem; } .text { width: 100%; .author-name { font-size: 2.5rem; margin-bottom: 2rem; } } } // ---- BUY ---- section#buy { flex-direction: column; padding: 4rem var(--padding-body); align-items: center; gap: 3rem; .text { width: 100%; margin-left: 0; .title { font-size: 2.5rem; } .buy-links { margin-top: 2.5rem; } } img { width: 100%; height: auto; } } // ---- FOOTER ---- body > footer { padding: 3rem var(--padding-body); header .title { font-size: 2.5rem; } .contact { width: 100%; flex-direction: column; gap: 2rem; margin-top: 3rem; } .legal { width: 100%; margin-top: 3rem; } } }