/** Shopify CDN: Minification failed

Line 336:0 Unexpected "<"
Line 352:162 Unterminated string token

**/
/* ============================================================
   THE FOREVER POST — Hero "Image with text"
   assets/custom-homepage.css
   Remplace INTEGRALEMENT le contenu du fichier. v3
   ============================================================ */


/* ---------- A. Espaces verticaux ---------- */
#shopify-section-template--20875033051297__image_with_text_YVx3jf {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

#shopify-section-template--20875033051297__image_with_text_YVx3jf * {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}


/* ============================================================
   B. MOBILE / TABLETTE (≤ 749px)
   Tout est traité ici. On ne touche PAS à la structure
   en desktop (c'est ce qui cassait la mise en page).
   ============================================================ */
@media screen and (max-width: 749px) {

  /* cadre de ratio de l'image : on le neutralise */
  #shopify-section-template--20875033051297__image_with_text_YVx3jf picture,
  #shopify-section-template--20875033051297__image_with_text_YVx3jf [class*="image"],
  #shopify-section-template--20875033051297__image_with_text_YVx3jf [class*="media"],
  #shopify-section-template--20875033051297__image_with_text_YVx3jf [style*="padding-bottom"],
  #shopify-section-template--20875033051297__image_with_text_YVx3jf [style*="aspect-ratio"] {
    aspect-ratio: auto !important;
    padding-bottom: 0 !important;
    padding-top: 0 !important;
    height: auto !important;
    min-height: 0 !important;
  }

  /* plus de marges latérales : on utilise toute la largeur */
  #shopify-section-template--20875033051297__image_with_text_YVx3jf div,
  #shopify-section-template--20875033051297__image_with_text_YVx3jf section {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
    min-height: 0 !important;
    height: auto !important;
  }

  #shopify-section-template--20875033051297__image_with_text_YVx3jf img,
  #shopify-section-template--20875033051297__image_with_text_YVx3jf picture img {
    display: block;
    width: 100% !important;
    height: 31svh !important;
    min-height: 190px !important;
    max-height: 280px !important;
    object-fit: cover;
    object-position: center center;
  }

  #shopify-section-template--20875033051297__image_with_text_YVx3jf h1,
  #shopify-section-template--20875033051297__image_with_text_YVx3jf h2,
  #shopify-section-template--20875033051297__image_with_text_YVx3jf h3,
  #shopify-section-template--20875033051297__image_with_text_YVx3jf [class*="title"],
  #shopify-section-template--20875033051297__image_with_text_YVx3jf [class*="heading"] {
    font-family: "Libre Baskerville", Georgia, serif !important;
    font-size: clamp(27px, 7vw, 36px) !important;
    line-height: 1.2 !important;
    font-weight: 400 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    margin: 24px 0 14px !important;
    padding: 0 18px !important;
    text-align: left !important;
  }

  #shopify-section-template--20875033051297__image_with_text_YVx3jf p,
  #shopify-section-template--20875033051297__image_with_text_YVx3jf [class*="rte"],
  #shopify-section-template--20875033051297__image_with_text_YVx3jf [class*="subtitle"],
  #shopify-section-template--20875033051297__image_with_text_YVx3jf [class*="subheading"] {
    font-size: 16px !important;
    line-height: 1.5 !important;
    margin: 0 0 20px !important;
    padding: 0 18px !important;
    text-align: left !important;
  }

  #shopify-section-template--20875033051297__image_with_text_YVx3jf a[class*="btn"],
  #shopify-section-template--20875033051297__image_with_text_YVx3jf a[class*="button"],
  #shopify-section-template--20875033051297__image_with_text_YVx3jf button[class*="btn"] {
    display: block !important;
    width: calc(100% - 36px) !important;
    margin: 0 18px 24px !important;
    padding: 16px 20px !important;
    font-size: 17px !important;
    text-align: center !important;
  }
}


@media screen and (max-width: 380px) {
  #shopify-section-template--20875033051297__image_with_text_YVx3jf img,
  #shopify-section-template--20875033051297__image_with_text_YVx3jf picture img {
    height: 27svh !important;
    min-height: 165px !important;
  }
}


/* ============================================================
   C. DESKTOP (≥ 990px)
   Uniquement la taille de l'image et la typo.
   Aucune règle de structure : la grille d'Envy reste intacte.
   ============================================================ */
@media screen and (min-width: 990px) {

  #shopify-section-template--20875033051297__image_with_text_YVx3jf img,
  #shopify-section-template--20875033051297__image_with_text_YVx3jf picture img {
    display: block;
    width: 100% !important;
    height: clamp(540px, 42vw, 700px) !important;
    object-fit: cover;
    object-position: center center;
  }

  #shopify-section-template--20875033051297__image_with_text_YVx3jf h1,
  #shopify-section-template--20875033051297__image_with_text_YVx3jf h2,
  #shopify-section-template--20875033051297__image_with_text_YVx3jf [class*="title"],
  #shopify-section-template--20875033051297__image_with_text_YVx3jf [class*="heading"] {
    font-family: "Libre Baskerville", Georgia, serif !important;
    font-size: clamp(38px, 3vw, 52px) !important;
    line-height: 1.2 !important;
    font-weight: 400 !important;
    letter-spacing: -0.01em !important;
    margin: 0 0 22px !important;
  }

  #shopify-section-template--20875033051297__image_with_text_YVx3jf p,
  #shopify-section-template--20875033051297__image_with_text_YVx3jf [class*="rte"] {
    font-size: 19px !important;
    line-height: 1.6 !important;
    max-width: 24em;
    margin: 0 0 30px !important;
  }

  #shopify-section-template--20875033051297__image_with_text_YVx3jf a[class*="btn"],
  #shopify-section-template--20875033051297__image_with_text_YVx3jf a[class*="button"] {
    font-size: 18px !important;
    padding: 19px 38px !important;
  }
}
#shopify-section-announcement-bar,
[class*="announcement"] {
  background-color: #A34A35 !important;
}

#shopify-section-announcement-bar,
#shopify-section-announcement-bar *,
[class*="announcement"],
[class*="announcement"] * {
  color: #FFFFFF !important;
}

[class*="announcement"] svg {
  fill: #FFFFFF !important;
  stroke: #FFFFFF !important;
}
/* ---- v4 : titre sur 2 lignes + espace réduit sous l'image ---- */
@media screen and (max-width: 749px) {
  #shopify-section-template--20875033051297__image_with_text_YVx3jf h1,
  #shopify-section-template--20875033051297__image_with_text_YVx3jf h2,
  #shopify-section-template--20875033051297__image_with_text_YVx3jf [class*="title"],
  #shopify-section-template--20875033051297__image_with_text_YVx3jf [class*="heading"] {
    font-size: clamp(23px, 6vw, 29px) !important;
    line-height: 1.22 !important;
    margin: 14px 0 12px !important;
    padding: 0 16px !important;
  }
  #shopify-section-template--20875033051297__image_with_text_YVx3jf p,
  #shopify-section-template--20875033051297__image_with_text_YVx3jf [class*="rte"] {
    padding: 0 16px !important;
  }
  #shopify-section-template--20875033051297__image_with_text_YVx3jf a[class*="btn"],
  #shopify-section-template--20875033051297__image_with_text_YVx3jf a[class*="button"] {
    width: calc(100% - 32px) !important;
    margin: 0 16px 20px !important;
  }
}
/* ---- "How does it work" : titre de section uniquement ---- */
#shopify-section-template--20875033051297__1772467584479ca957 h2 {
  font-family: "Libre Baskerville", Georgia, serif !important;
  font-size: clamp(1.7rem, 3.6vw, 2.6rem) !important;
  font-weight: 400 !important;
  line-height: 1.2 !important;
  letter-spacing: -0.01em !important;
  color: #2B2723 !important;
  text-transform: none !important;
}

#shopify-section-template--20875033051297__image_with_text_YVx3jf p,
#shopify-section-template--20875033051297__image_with_text_YVx3jf [class*="rte"] {
  color: #5C554D !important;
}

/* ---- "How does it work" — page produit ---- */
#shopify-section-template--20875033378977__blocks_BaUqMR h2 {
  font-family: "Libre Baskerville", Georgia, serif !important;
  font-size: clamp(1.7rem, 3.6vw, 2.6rem) !important;
  font-weight: 400 !important;
  line-height: 1.2 !important;
  letter-spacing: -0.01em !important;
  color: #2B2723 !important;
  text-transform: none !important;
}
/* ---- Titres de section — page produit ---- */
#shopify-section-template--20875033378977__blocks_BaUqMR h2,
#shopify-section-template--20875033378977__product-recommendations h2 {
  font-family: "Libre Baskerville", Georgia, serif !important;
  font-size: clamp(1.7rem, 3.6vw, 2.6rem) !important;
  font-weight: 400 !important;
  line-height: 1.2 !important;
  letter-spacing: -0.01em !important;
  color: #2B2723 !important;
  text-transform: none !important;
}

/* ================= PAGE PANIER ================= */
/* Scope : l'id du body est généré depuis le titre de page */
body#shopping-cart h1 {
  font-family: "Libre Baskerville", Georgia, serif !important;
  font-size: clamp(26px, 6.5vw, 40px) !important;
  line-height: 1.15 !important;
  font-weight: 400 !important;
  margin: 0 0 20px !important;
  text-align: left !important;
  padding: 0 18px !important;
}

body#shopping-cart * {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

body#shopping-cart img {
  max-width: 150px !important;
  height: auto !important;
}

/* le bouton dont on ne voit pas le texte */
body#shopping-cart [name="update"],
body#shopping-cart .cart__update,
body#shopping-cart input[type="submit"],
body#shopping-cart .btn--secondary {
  color: #FFFFFF !important;
  background-color: #A34A35 !important;
}

@media screen and (max-width: 749px) {
  body#shopping-cart div,
  body#shopping-cart section,
  body#shopping-cart td,
  body#shopping-cart th {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }

  /* la ligne produit : vignette à gauche, infos à droite */
  body#shopping-cart .cart-item,
  body#shopping-cart tbody tr {
    display: grid !important;
    grid-template-columns: 110px 1fr !important;
    gap: 14px !important;
    align-items: center !important;
    padding: 16px 18px !important;
    border-bottom: 1px solid #E4DED6 !important;
    text-align: left !important;
  }
  body#shopping-cart .cart-item *,
  body#shopping-cart tbody tr * { text-align: left !important; }

  body#shopping-cart a[class*="btn"],
  body#shopping-cart button[class*="btn"] {
    padding: 15px 20px !important;
    font-size: 17px !important;
    margin: 0 18px 10px !important;
    width: calc(100% - 36px) !important;
  }
}
/* ============================================================
   Home hero (image_with_text_YVx3jf) — MOBILE uniquement
   Réduire l'image (height:50vh en dur) + resserrer le titre,
   pour faire remonter le bouton au-dessus du pli.
   ============================================================ */
@media (max-width: 749px){

  /* 1) Casser la hauteur fixe de 50vh de l'image du hero */
  #image-with-text--template--21489120805025__image_with_text_YVx3jf{
    height: 32vh !important;
    min-height: 0 !important;
  }
  #image-with-text--template--21489120805025__image_with_text_YVx3jf img{
    height: 100% !important;
    width: 100% !important;
    object-fit: cover !important;
  }

  /* 2) Resserrer le bloc texte et le titre */
  #shopify-section-template--21489120805025__image_with_text_YVx3jf .homepage-featured-content-box-inner{
    padding-top: .8rem !important;
    padding-bottom: 1rem !important;
    text-align: center !important;
  }
  #shopify-section-template--21489120805025__image_with_text_YVx3jf .homepage-sections--title{
    font-size: clamp(1.5rem, 6vw, 2rem) !important;
    line-height: 1.15 !important;
    margin-bottom: .5rem !important;
  }
  #shopify-section-template--21489120805025__image_with_text_YVx3jf .featured-row__subtext{
    margin-bottom: .9rem !important;
  }

  /* 3) Bouton bien visible */
  #shopify-section-template--21489120805025__image_with_text_YVx3jf .homepage-featured-box-btn{
    display: inline-block !important;
  }
}
<div class="storiesgrid" style="background-color:#fcf9f5; padding:20px 18px;">

  <div style="max-width:1080px; margin:0 auto; display:grid; grid-template-columns:repeat(auto-fit, minmax(240px, 1fr)); gap:16px;">

      <a href="/products/desire-lies" style="text-decoration:none; color:inherit;">
      <div style="background:#fff; box-shadow:0 4px 14px rgba(60,45,30,.10); display:flex; flex-direction:column;">

        <div style="position:relative;">
            <picture>
              <source media="(min-width: 750px)" srcset="//theforeverpost.com/cdn/shop/files/Gemini_Generated_Image_qwsykjqwsykjqwsy.jpg?v=1789057668&width=600">
              <img src="//theforeverpost.com/cdn/shop/files/Gemini_Generated_Image_qwsykjqwsykjqwsy.jpg?v=1789057668&width=600" alt="Desire & Lies" width="600" height="750" style="width:100% !important; height:auto !important; aspect-ratio:4/5 !important; object-fit:contain !important; display:block !important; max-height:none !important;">
            </picture>
        </div>

        <div style="padding:14px 10px; text-align:center; height:74px; display:flex; flex-direction:column; align-items:center; justify-content:center;">
          <div style="font-size:17px; font-weight:600; color:#2a2520; margin:0 0 3px; font-family:'Libre Baskerville',Georgia,serif; line-height:1.25;">Desire & Lies</div>
          <div style="font-size:10px; letter-spacing:1.5px; text-transform:uppercase; color:#5a5048; font-family:'Montserrat',sans-serif;">Romance · 1950's</div>
        </div>
      </div>
      </a>

      <a href="/products/from-another-time" style="text-decoration:none; color:inherit;">
      <div style="background:#fff; box-shadow:0 4px 14px rgba(60,45,30,.10); display:flex; flex-direction:column;">

        <div style="position:relative;">
            <picture>
              <source media="(min-width: 750px)" srcset="//theforeverpost.com/cdn/shop/files/Gemini_Generated_Image_ri7omnri7omnri7o.jpg?v=1789057748&width=600">
              <img src="//theforeverpost.com/cdn/shop/files/Gemini_Generated_Image_ri7omnri7omnri7o.jpg?v=1789057748&width=600" alt="From Another Time" width="600" height="750" style="width:100% !important; height:auto !important; aspect-ratio:4/5 !important; object-fit:contain !important; display:block !important; max-height:none !important;">
            </picture>
        </div>

        <div style="padding:14px 10px; text-align:center; height:74px; display:flex; flex-direction:column; align-items:center; justify-content:center;">
          <div style="font-size:17px; font-weight:600; color:#2a2520; margin:0 0 3px; font-family:'Libre Baskerville',Georgia,serif; line-height:1.25;">From Another Time</div>
          <div style="font-size:10px; letter-spacing:1.5px; text-transform:uppercase; color:#5a5048; font-family:'Montserrat',sans-serif;">Time-travel</div>
        </div>
      </div>
      </a>

      <a href="/products/fragments-of-memory" style="text-decoration:none; color:inherit;">
      <div style="background:#fff; box-shadow:0 4px 14px rgba(60,45,30,.10); display:flex; flex-direction:column;">

        <div style="position:relative;">
            <picture>
              <source media="(min-width: 750px)" srcset="//theforeverpost.com/cdn/shop/files/Gemini_Generated_Image_y9wee7y9wee7y9we.jpg?v=1789057646&width=600">
              <img src="//theforeverpost.com/cdn/shop/files/Gemini_Generated_Image_y9wee7y9wee7y9we.jpg?v=1789057646&width=600" alt="Fragments of Memory" width="600" height="750" style="width:100% !important; height:auto !important; aspect-ratio:4/5 !important; object-fit:contain !important; display:block !important; max-height:none !important;">
            </picture>
        </div>

        <div style="padding:14px 10px; text-align:center; height:74px; display:flex; flex-direction:column; align-items:center; justify-content:center;">
          <div style="font-size:17px; font-weight:600; color:#2a2520; margin:0 0 3px; font-family:'Libre Baskerville',Georgia,serif; line-height:1.25;">Fragments of Memory</div>
          <div style="font-size:10px; letter-spacing:1.5px; text-transform:uppercase; color:#5a5048; font-family:'Montserrat',sans-serif;">True story · 1901</div>
        </div>
      </div>
      </a>

  </div>
</div>