Limit homepage screenshots to the hero and Overview

site/home.css

@@ -13,18 +13,16 @@ h1 { font-size: clamp(45px, 6.1vw, 80px); font-weight: 590; letter-spacing: -.05
 h2 { font-size: 48px; line-height: 1.12; font-weight: 560; letter-spacing: -2px; margin: 0; text-wrap: balance; }
 .section-heading > p { max-width: 405px; margin: 0; font-size: 15px; line-height: 1.85; color: var(--muted); text-wrap: pretty; }
 .feature-capture { min-width: 0; max-width: 100%; margin: 0; }
-.feature-capture > a, .detail-capture { display: block; min-width: 0; max-width: 100%; border: 1px solid var(--line); border-radius: 22px; overflow: hidden; background: var(--page); line-height: 0; }
+.feature-capture > a { display: block; min-width: 0; max-width: 100%; border: 1px solid var(--line); border-radius: 22px; overflow: hidden; background: var(--page); line-height: 0; }
-.feature-capture img, .detail-capture img { display: block; width: 100%; height: auto; }
+.feature-capture img { display: block; width: 100%; height: auto; }
 .feature-capture figcaption { margin-top: 19px; color: var(--muted); font-size: 12px; text-align: center; }
 .details-section { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; padding-top: 115px; }
-.layout-details { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; margin-top: 48px; }
 .gallery-link { padding-top: 44px; text-align: center; }
-.detail-feature { min-width: 0; }
+.detail-feature { min-width: 0; padding: 32px; border: 1px solid var(--line); border-radius: 20px; background: var(--soft); }
-.detail-capture { border-radius: 17px; }
+.detail-feature h3 { margin: 0 0 12px; font-size: 25px; font-weight: 550; letter-spacing: -.8px; }
-.detail-feature h3 { margin: 25px 0 12px; font-size: 25px; font-weight: 550; letter-spacing: -.8px; }
 .detail-feature p { max-width: 445px; margin: 0; color: var(--muted); font-size: 14px; line-height: 1.8; text-wrap: pretty; }
 .appearance-section { padding-block: 93px 83px; background: var(--soft); }
-.centered-heading { text-align: center; max-width: 650px; margin: 0 auto 40px; }
+.centered-heading { text-align: center; max-width: 650px; margin: 0 auto; }
 .centered-heading p { font-size: 15px; line-height: 1.8; color: var(--muted); max-width: 465px; margin: 20px auto 0; text-wrap: balance; }
 .start-section { text-align: center; padding-block: 115px 104px; }
 .start-logo { width: 74px; height: 74px; margin: 0 auto 23px; }
@@ -51,15 +49,14 @@ h2 { font-size: 48px; line-height: 1.12; font-weight: 560; letter-spacing: -2px;
   .section-heading h2 { font-size: 36px; letter-spacing: -1.4px; }
   .section-heading > p { max-width: 480px; font-size: 14px; line-height: 1.8; }
   .appearance-section { padding-block: 68px 57px; }
-  .centered-heading { margin-bottom: 28px; }
   .centered-heading h2 { font-size: 36px; letter-spacing: -1.5px; }
   .centered-heading p { font-size: 14px; margin-top: 18px; max-width: 370px; }
   .feature-capture > a { border-radius: 17px; }
   .feature-capture figcaption { font-size: 10px; margin-top: 13px; }
-  .details-section { grid-template-columns: 1fr; gap: 42px; padding-top: 70px; }
+  .details-section { grid-template-columns: 1fr; gap: 20px; padding-top: 70px; }
-  .layout-details { grid-template-columns: 1fr; gap: 42px; margin-top: 36px; }
   .gallery-link { padding-top: 32px; }
-  .detail-feature h3 { font-size: 24px; margin-top: 21px; }
+  .detail-feature { padding: 26px; }
+  .detail-feature h3 { font-size: 24px; }
   .detail-feature p { font-size: 14px; max-width: 480px; }
   .start-section { padding-block: 78px 70px; }
   .start-logo { width: 62px; height: 62px; margin-bottom: 22px; }

site/index.html

@@ -49,30 +49,15 @@
         <a href="assets/screenshots/ferese-overview.webp" target="_blank" rel="noopener" aria-label="View the Overview screenshot at full resolution"><img src="assets/screenshots/ferese-overview-1440.webp" srcset="assets/screenshots/ferese-overview-960.webp 960w, assets/screenshots/ferese-overview-1440.webp 1440w, assets/screenshots/ferese-overview.webp 2880w" sizes="(max-width: 700px) calc(100vw - 40px), (max-width: 1200px) calc(100vw - 80px), 1120px" width="2880" height="1800" alt="Ferese Overview showing three workspaces and open terminal and reading windows over the city wallpaper." loading="lazy" decoding="async"></a>
         <figcaption>Every workspace, in view.</figcaption>
       </figure>
-      <div class="layout-details">
-        <article class="detail-feature">
-          <a class="detail-capture" href="assets/screenshots/ferese-window-layout.webp" target="_blank" rel="noopener" aria-label="View the window layout screenshot at full resolution"><img src="assets/screenshots/ferese-window-layout-960.webp" srcset="assets/screenshots/ferese-window-layout-960.webp 960w, assets/screenshots/ferese-window-layout-1440.webp 1440w, assets/screenshots/ferese-window-layout.webp 2880w" sizes="(max-width: 700px) calc(100vw - 40px), (max-width: 1200px) calc((100vw - 112px) / 2), 544px" width="2880" height="1800" alt="A terminal and reading window arranged side by side over the city wallpaper." loading="lazy" decoding="async"></a>
-          <h3>Keep your work together.</h3><p>Give each window room, with your reading and tools side by side.</p>
-        </article>
-        <article class="detail-feature">
-          <a class="detail-capture" href="assets/screenshots/ferese-workspace-preview.webp" target="_blank" rel="noopener" aria-label="View the workspace preview screenshot at full resolution"><img src="assets/screenshots/ferese-workspace-preview-960.webp" srcset="assets/screenshots/ferese-workspace-preview-960.webp 960w, assets/screenshots/ferese-workspace-preview-1440.webp 1440w, assets/screenshots/ferese-workspace-preview.webp 2880w" sizes="(max-width: 700px) calc(100vw - 40px), (max-width: 1200px) calc((100vw - 112px) / 2), 544px" width="2880" height="1800" alt="Three workspace thumbnails above a browser window, with the current workspace outlined in blue." loading="lazy" decoding="async"></a>
-          <h3>Know where you left off.</h3><p>Hover over your workspaces for a preview of the windows in each one.</p>
-        </article>
-      </div>
     </section>
     <section class="appearance-section" id="appearance" aria-labelledby="appearance-title"><div class="page-width">
       <div class="centered-heading"><h2 id="appearance-title">One look. Everywhere.</h2><p>Choose your colours and shape your panel. A shared theme brings every part of Ferese together.</p></div>
-      <figure class="feature-capture appearance-capture">
-        <a href="assets/screenshots/ferese-appearance.webp" target="_blank" rel="noopener" aria-label="View the Appearance screenshot at full resolution"><img src="assets/screenshots/ferese-appearance-1440.webp" srcset="assets/screenshots/ferese-appearance-960.webp 960w, assets/screenshots/ferese-appearance-1440.webp 1440w, assets/screenshots/ferese-appearance.webp 2880w" sizes="(max-width: 700px) calc(100vw - 40px), (max-width: 1200px) calc(100vw - 80px), 1120px" width="2880" height="1800" alt="Ferese Appearance settings showing six themes with paired light and dark colours." loading="lazy" decoding="async"></a>
-      </figure>
     </div></section>
     <section class="details-section page-width" aria-label="Panel and media features">
       <article class="detail-feature">
-        <a class="detail-capture" href="assets/screenshots/ferese-panel-settings.webp" target="_blank" rel="noopener" aria-label="View the Panel and Shell screenshot at full resolution"><img src="assets/screenshots/ferese-panel-settings-960.webp" srcset="assets/screenshots/ferese-panel-settings-960.webp 960w, assets/screenshots/ferese-panel-settings-1440.webp 1440w, assets/screenshots/ferese-panel-settings.webp 2880w" sizes="(max-width: 700px) calc(100vw - 40px), (max-width: 1200px) calc((100vw - 104px) / 2), 548px" width="2880" height="1800" alt="Panel and Shell settings with a composition preview, top and bottom positions, and island surfaces." loading="lazy" decoding="async"></a>
         <h3>Your panel, your way.</h3><p>Arrange items in groups, choose their surfaces, and put your panel at the top or bottom of the screen.</p>
       </article>
       <article class="detail-feature">
-        <a class="detail-capture" href="assets/screenshots/ferese-media.webp" target="_blank" rel="noopener" aria-label="View the music popup screenshot at full resolution"><img src="assets/screenshots/ferese-media-960.webp" srcset="assets/screenshots/ferese-media-960.webp 960w, assets/screenshots/ferese-media-1440.webp 1440w, assets/screenshots/ferese-media.webp 2880w" sizes="(max-width: 700px) calc(100vw - 40px), (max-width: 1200px) calc((100vw - 104px) / 2), 548px" width="2880" height="1800" alt="A translucent Now Playing popup with Spotify album artwork and playback controls." loading="lazy" decoding="async"></a>
         <h3>A little closer to your music.</h3><p>See what's playing and pause or skip a track, right from your panel.</p>
       </article>
     </section>