Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel is required to process package imports. If you need a different preprocessor remove all packages first.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <body>
  <div class="hero">
    <div class="logo">
      <div class="logo-image"><img src="https://marcolago.com/misc/codepen/wpmeetup/rightbeer/beer-box-delivery-truck.png"></div>
    </div>
    <div class="content">
      <div class="copy">
          <h3 class="title">#StaiACasa, la birra te la portiamo noi</h3>
          <p>Sperando di fare cosa gradita vi comunichiamo che — pur riconoscendo che la birra non sia un bene di prima necessità — abbiamo pensato di allietare la vostra permanenza a casa attivando il servizio di consegna a domicilio.</p>
          <p><a class="button">Scopri tutti i Beer Box</a></p>
          <p>Consegne in Torino e cintura. <strong>Spedizione gratuita</strong>.</p>
      </div>
    </div>
    <div class="bottles">
      <img src="https://marcolago.com/misc/codepen/wpmeetup/rightbeer/bottiglie.png">
    </div>
  </div>

  <div class="beer-boxes">


<!-- box 4 you inizio -->
    <div class="beer-box">
      <h3 class="beer-box__title">Box 4 You - Brewfist Daily Brew</h3>
      <figure class="beer-box__figure">
        <img src="https://marcolago.com/misc/codepen/wpmeetup/rightbeer/box-4-you-logo.svg" alt="BOX 4 YOU">
        <div class="beer-box__price">
          <h4>€ 15,40</h4>
          <p>con consegna a domicilio</p>
        </div>
      </figure>
      <div class="beer-box__picture">
        <img src="https://marcolago.com/misc/codepen/wpmeetup/rightbeer/box/brewfist-daily-brew.jpg" alt="Box 4 You - Brewfist Daily Brew">
      </div>
      <div class="beer-box__content">
        <p>4 bottiglie da 33 cl</p>
        <ul>
          <li>1× <strong>La Bassa</strong> (Real Lager)</li>
          <li>1× <strong>La Mosca</strong> (Blanche)</li>
          <li>1× <strong>Il Grillotalpa</strong> (American Lager)</li>
          <li>1× <strong>Il Montante</strong> (Doppelbock)</li>
        </ul>
      </div>
    </div>
<!-- box fine -->


<!-- bg box inizio -->
            <div class="beer-box">
              <h3 class="beer-box__title">Big Box - Brewfist Core Range</h3>
              <figure class="beer-box__figure">
                <img src="https://marcolago.com/misc/codepen/wpmeetup/rightbeer/big-box-logo.svg" alt="BIG BOX">
                <div class="beer-box__price">
                  <h4>€ 51,90</h4>
                  <p>con consegna a domicilio</p>
                </div>
              </figure>
                <div class="beer-box__picture">
                  <img src="https://marcolago.com/misc/codepen/wpmeetup/rightbeer/box/brewfist-core-range.jpg" alt="Big Box - Brewfist Core Range">
                </div>
                <div class="beer-box__content">
                  <p>12 bottiglie da 33 cl</p>
                  <ul>
                    <li><strong>1× 24K</strong> (Golden Ale)</li>
                    <li><strong>1× Nina</strong> (Pils)</li>
                    <li><strong>1× Jale</strong> (Extra Special Bitter)</li>
                    <li><strong>1× Fear</strong> (Milk Chocolate Stout)</li>
                    <li><strong>1× Terminal</strong> (Pale Ale)</li>
                    <li><strong>1× Caterpillar</strong> (Rye Pale Ale)</li>
                    <li><strong>1× Czech Norris</strong> (Imperial Pils)</li>
                    <li><strong>1× Space Frontier</strong> (Grape IPA)</li>
                    <li><strong>1× 2Late</strong> (Imperial IPA)</li>
                    <li><strong>1× Spaghetti Western</strong> (Imperial Chocolate Stout)</li>
                    <li><strong>1× One Way Triphell</strong> (Tripel)</li>
                    <li><strong>1× Scuba</strong> (Quadrupel)</li>
                  </ul>
                </div>
            </div>
<!-- box fine -->


<!-- box 4 you inizio -->
            <div class="beer-box">
              <h3 class="beer-box__title">Box 4 You - Birra Elvo</h3>
              <figure class="beer-box__figure">
                <img src="https://marcolago.com/misc/codepen/wpmeetup/rightbeer/box-4-you-logo.svg" alt="BOX 4 YOU">
                <div class="beer-box__price">
                  <h4>€ 18,50</h4>
                  <p>con consegna a domicilio</p>
                </div>
              </figure>
                <div class="beer-box__picture">
                  <img src="https://marcolago.com/misc/codepen/wpmeetup/rightbeer/box/birra-elvo.jpg" alt="Box 4 You - Birra Elvo">
                </div>
                <div class="beer-box__content">
                  <p>4 bottiglie da 33 cl</p>
                  <ul>
                    <li>1× <strong>Pils</strong></li>
                    <li>1× <strong>Weizen</strong></li>
                    <li>1× <strong>Hellerbock</strong></li>
                    <li>1× <strong>Doppelbock</strong></li>
                  </ul>
                </div>
            </div>
<!-- box fine -->


<!-- bg box inizio -->
            <div class="beer-box">
              <h3 class="beer-box__title">Big Box - Canediguerra</h3>
              <figure class="beer-box__figure">
                <img src="https://marcolago.com/misc/codepen/wpmeetup/rightbeer/big-box-logo.svg" alt="BIG BOX">
                <div class="beer-box__price">
                  <h4>€ 50,90</h4>
                  <p>con consegna a domicilio</p>
                </div>
              </figure>
                <div class="beer-box__picture">
                  <img src="https://marcolago.com/misc/codepen/wpmeetup/rightbeer/box/canediguerra.jpg" alt="Big Box - Canediguerra">
                </div>
                <div class="beer-box__content">
                  <p>12 bottiglie da 33 cl</p>
                  <ul>
                    <li>1× <strong>Berliner Weisse</strong></li>
                    <li>1× <strong>Brown Porter</strong></li>
                    <li>1× <strong>Cream Ale</strong></li>
                    <li>1× <strong>Best Bitter</strong></li>
                    <li>1× <strong>Blanche</strong></li>
                    <li>1× <strong>Saison</strong></li>
                    <li>1× <strong>Tripel</strong></li>
                    <li>1× <strong>Pacific IPA</strong></li>
                    <li>1× <strong>American IPA</strong></li>
                    <li>1× <strong>Double IPA</strong></li>
                    <li>1× <strong>DDH Damasco IPA</strong> (Fruit IPA con Albicocche)</li>
                    <li>1× <strong>Styrian</strong> (Imperial Pils)</li>
                  </ul>
                </div>
            </div>
<!-- box fine -->


<!-- six box inizio -->
            <div class="beer-box">
              <h3 class="beer-box__title">Six Box - Birra dell’Eremo</h3>
              <figure class="beer-box__figure">
                <img src="https://marcolago.com/misc/codepen/wpmeetup/rightbeer/six-box-logo.svg" alt="SIX BOX">
                <div class="beer-box__price">
                  <h4>€ 26,90</h4>
                  <p>con consegna a domicilio</p>
                </div>
              </figure>
                <div class="beer-box__picture">
                  <img src="https://marcolago.com/misc/codepen/wpmeetup/rightbeer/box/birra-dell-eremo.jpg" alt="Six Box - Birra dell’Eremo">
                </div>
                <div class="beer-box__content">
                  <p>6 bottiglie da 33 cl</p>
                  <ul>
                    <li>1× <strong>Madue</strong> (Passion Fruit Sour Ale)</li>
                    <li>1× <strong>Nobile</strong> (Golden Ale)</li>
                    <li>1× <strong>Terra</strong> (Oatmeal Stout)</li>
                    <li>1× <strong>Fuoco</strong> (Tripel)</li>
                    <li>1× <strong>Fiera</strong> (American IPA)</li>
                    <li>1× <strong>Glaciale</strong> (Double IPA)</li>
                  </ul>
                </div>
            </div>
<!-- box fine -->


<!-- bg box inizio -->
            <div class="beer-box">
              <h3 class="beer-box__title">Big Box - Della Granda</h3>
              <figure class="beer-box__figure">
                <img src="https://marcolago.com/misc/codepen/wpmeetup/rightbeer/big-box-logo.svg" alt="BIG BOX">
                <div class="beer-box__price">
                  <h4>€ 49,60</h4>
                  <p>con consegna a domicilio</p>
                </div>
              </figure>
                <div class="beer-box__picture">
                  <img src="https://marcolago.com/misc/codepen/wpmeetup/rightbeer/box/della-granda.jpg" alt="Big Box - Della Granda">
                </div>
                <div class="beer-box__content">
                  <p>12 bottiglie da 33 cl</p>
                  <ul>
                    <li>1× <strong>Lips</strong> (Gose)</li>
                    <li>1× <strong>Kloe</strong> (Kölsch)</li>
                    <li>1× <strong>Passionale</strong> (Blanche)</li>
                    <li>1× <strong>Abbaziale</strong> (Dubbel)</li>
                    <li>1× <strong>Spirituale</strong> (Tripel)</li>
                    <li>1× <strong>Lived</strong> (Quadrupel)</li>
                    <li>1x <strong>Missis IPA</strong> (IPA)</li>
                    <li>1× <strong>Xtra-IPA</strong> (American IPA)</li>
                    <li>1× <strong>Sirena</strong> (White IPA)</li>
                    <li>1× <strong>Black Hop Sun</strong> (Black IPA)</li>
                    <li>1× <strong>Alchemy</strong> (IGA)</li>
                    <li>1× <strong>Danger</strong> (Imperial Russian Stout)</li>
                  </ul>
                </div>
            </div>
<!-- box fine -->


<!-- box 4 you inizio -->
            <div class="beer-box">
              <h3 class="beer-box__title">Box 4 You - Birra Perugia</h3>
              <figure class="beer-box__figure">
                <img src="https://marcolago.com/misc/codepen/wpmeetup/rightbeer/box-4-you-logo.svg" alt="BOX 4 YOU">
                <div class="beer-box__price">
                  <h4>€ 19,80</h4>
                  <p>con consegna a domicilio</p>
                </div>
              </figure>
                <div class="beer-box__picture">
                  <img src="https://marcolago.com/misc/codepen/wpmeetup/rightbeer/box/birra-perugia.jpg" alt="Box 4 You - Birra Perugia">
                </div>
                <div class="beer-box__content">
                  <p>4 bottiglie da 33 cl</p>
                  <ul>
                    <li>1× <strong>Golden Ale</strong></li>
                    <li>1× <strong>Chocolate Porter</strong></li>
                    <li>1× <strong>Ila</strong> (Scotch Ale)</li>
                    <li>1× <strong>Panamanà</strong> (Imperial Coffee Stout)</li>
                  </ul>
                </div>
            </div>
<!-- box fine -->


<!-- six box inizio -->
            <div class="beer-box">
              <h3 class="beer-box__title">Six Box - Piccolo Birrificio Clandestino</h3>
              <figure class="beer-box__figure">
                <img src="https://marcolago.com/misc/codepen/wpmeetup/rightbeer/six-box-logo.svg" alt="SIX BOX">
                <div class="beer-box__price">
                  <h4>€ 26,90</h4>
                  <p>con consegna a domicilio</p>
                </div>
              </figure>
                <div class="beer-box__picture">
                  <img src="https://marcolago.com/misc/codepen/wpmeetup/rightbeer/box/piccolo-birrificio-clandestino.jpg" alt="Six Box - Piccolo Birrificio Clandestino">
                </div>
                <div class="beer-box__content">
                  <p>6 bottiglie da 33 cl</p>
                  <ul>
                    <li>1× <strong>Boia Dè</strong> (Belgian Blond)</li>
                    <li>1× <strong>Awanagana</strong> (Pale Ale)</li>
                    <li>1× <strong>Cinque e Cinque</strong> (Belgian Strong Ale)</li>
                    <li>1× <strong>Santa Giulia</strong> (Brown Ale)</li>
                    <li>1× <strong>Ri’Appala</strong> (American IPA)</li>
                    <li>1× <strong>Goslar</strong> (Gose)</li>
                  </ul>
                </div>
            </div>
<!-- box fine -->


<!-- six box inizio -->
            <div class="beer-box">
              <h3 class="beer-box__title">Six Box - Filodilana</h3>
              <figure class="beer-box__figure">
                <img src="https://marcolago.com/misc/codepen/wpmeetup/rightbeer/six-box-logo.svg" alt="SIX BOX">
                <div class="beer-box__price">
                  <h4>€ 26,30</h4>
                  <p>con consegna a domicilio</p>
                </div>
              </figure>
                <div class="beer-box__picture">
                  <img src="https://marcolago.com/misc/codepen/wpmeetup/rightbeer/box/filodilana.jpg" alt="Six Box - Filodilana">
                </div>
                <div class="beer-box__content">
                  <p>6 bottiglie da 33 cl</p>
                  <ul>
                    <li>1× <strong>Beeela</strong> (Hoppy Belgian Blond)</li>
                    <li>1× <strong>Borgna</strong> (Bitter)</li>
                    <li>1× <strong>Dolly</strong> (Tripel)</li>
                    <li>1× <strong>Filo di Scozia</strong> (Scotch Ale)</li>
                    <li>1× <strong>Quattro Pere</strong> (Quadrupel con Pere Martin Sec)</li>
                    <li>1× <strong>Peura Neira</strong> (American Imperial Coffee Stout)</li>
                  </ul>
                </div>
            </div>
<!-- box fine -->


<!-- box 4 you inizio -->
            <div class="beer-box">
              <h3 class="beer-box__title">Box 4 You - Speciale IGA</h3>
              <figure class="beer-box__figure">
                <img src="https://marcolago.com/misc/codepen/wpmeetup/rightbeer/box-4-you-logo.svg" alt="BOX 4 YOU">
                <div class="beer-box__price">
                  <h4>€ 21,80</h4>
                  <p>con consegna a domicilio</p>
                </div>
              </figure>
                <div class="beer-box__picture">
                  <img src="https://marcolago.com/misc/codepen/wpmeetup/rightbeer/box/speciale-iga.jpg" alt="Box 4 You - Speciale IGA">
                </div>
                <div class="beer-box__content">
                  <p>4 bottiglie da 33 cl</p>
                  <ul>
                    <li>1× <strong>Fuori dal Gregge</strong> (IGA con Uva Arneis)</li>
                    <li>1× <strong>Fuori dal Gregge #2</strong> (IGA con Uva Nebbiolo)</li>
                    <li>1× <strong>Selva</strong> (IGA con mosto fresco di Sauvignon Blanc)</li>
                    <li>1× <strong>Madra</strong> (IGA con mosto di Sangiovese)</li>
                  </ul>
                </div>
            </div>
<!-- box fine -->


<!-- six box inizio -->
            <div class="beer-box">
              <h3 class="beer-box__title">Six Box - Speciale IPA</h3>
              <figure class="beer-box__figure">
                <img src="https://marcolago.com/misc/codepen/wpmeetup/rightbeer/six-box-logo.svg" alt="SIX BOX">
                <div class="beer-box__price">
                  <h4>€ 27,40</h4>
                  <p>con consegna a domicilio</p>
                </div>
              </figure>
                <div class="beer-box__picture">
                  <img src="https://marcolago.com/misc/codepen/wpmeetup/rightbeer/box/speciale-ipa.jpg" alt="Six Box - Speciale IPA">
                </div>
                <div class="beer-box__content">
                  <p>6 bottiglie da 33 cl</p>
                  <ul>
                    <li>1× <strong>Oimmena</strong> (Session IPA)</li>
                    <li>1× <strong>Luppolo Alberto</strong> (American Pale Ale)</li>
                    <li>1× <strong>Calibro 7</strong> (American Pale Ale)</li>
                    <li>1× <strong>Timber</strong> (American IPA con gemme di Pino e Abete)</li>
                    <li>1× <strong>Double Trouble</strong> (DDH IPA)</li>
                    <li>1× <strong>Green Petrol</strong> (Black IPA)</li>
                  </ul>
                </div>
            </div>
<!-- box fine -->


<!-- six box inizio -->
            <div class="beer-box">
              <h3 class="beer-box__title">Six Box - Speciale Lattine</h3>
              <figure class="beer-box__figure">
                <img src="https://marcolago.com/misc/codepen/wpmeetup/rightbeer/six-box-logo.svg" alt="SIX BOX">
                <div class="beer-box__price">
                  <h4>€ 27,45</h4>
                  <p>con consegna a domicilio</p>
                </div>
              </figure>
                <div class="beer-box__picture">
                  <img src="https://marcolago.com/misc/codepen/wpmeetup/rightbeer/box/speciale-lattine.jpg" alt="Six Box - Speciale Lattine">
                </div>
                <div class="beer-box__content">
                  <p>6 lattine miste</p>
                  <ul>
                    <li>1× <strong>Aria</strong> (Session IPA) – 33 cl</li>
                    <li>1× <strong>Yaki</strong> (DDH American IPA) – 33 cl</li>
                    <li>1× <strong>No War</strong> (Rye IPA) – 33 cl</li>
                    <li>1× <strong>Punks do it Bitter</strong> (Best Bitter) – 33 cl</li>
                    <li>1× <strong>Eva-K</strong> (Keller Pils) – 44 cl</li>
                    <li>1× <strong>Nina</strong> (Blanche) – 44 cl</li>
                  </ul>
                </div>
            </div>
<!-- box fine -->


<!-- box 4 you inizio -->
            <div class="beer-box">
              <h3 class="beer-box__title">Box 4 You - Brewfist Legend + Napoleon Glass</h3>
              <figure class="beer-box__figure">
                <img src="https://marcolago.com/misc/codepen/wpmeetup/rightbeer/box-4-you-logo.svg" alt="BOX 4 YOU">
                <div class="beer-box__price">
                  <h4>€ 28,60</h4>
                  <p>con consegna a domicilio</p>
                </div>
              </figure>
                <div class="beer-box__picture">
                  <img src="https://marcolago.com/misc/codepen/wpmeetup/rightbeer/box/brewfist-legend-napoleon-glass.jpg" alt="Box 4 You - Brewfist Legend + Napoleon Glass">
                </div>
                <div class="beer-box__content">
                  <p>3 bottiglie da 33 cl + 1 bicchiere Napoleon</p>
                  <ul>
                    <li>1× <strong>La Leggenda Elijah</strong> (Imperial Stout aged in Bourbon Barrels)</li>
                    <li>1× <strong>La Leggenda Sam</strong> (Imperial Stout aged in Jamaica Rhum Barrels)</li>
                    <li>1× <strong>La Leggenda Victor</strong> (Imperial Stout aged in Martinique Rhum Barrels )</li>
                    <li>1× <strong>Bicchiere Brewfist</strong> (modello Napoleon)</li>
                  </ul>
                </div>
            </div>
<!-- box fine -->


<!-- box 4 you inizio -->
            <div class="beer-box">
              <h3 class="beer-box__title">Box 4 You - Brewfist Barrel + Napoleon Glass</h3>
              <figure class="beer-box__figure">
                <img src="https://marcolago.com/misc/codepen/wpmeetup/rightbeer/box-4-you-logo.svg" alt="BOX 4 YOU">
                <div class="beer-box__price">
                  <h4>€ 26,95</h4>
                  <p>con consegna a domicilio</p>
                </div>
              </figure>
                <div class="beer-box__picture">
                  <img src="https://marcolago.com/misc/codepen/wpmeetup/rightbeer/box/brewfist-barrel-napoleon-glass.jpg" alt="Box 4 You - Brewfist Barrel + Napoleon Glass">
                </div>
                <div class="beer-box__content">
                  <p>3 bottiglie da 33 cl + 1 bicchiere Napoleon</p>
                  <ul>
                    <li>1× <strong>1x The Pilgrim</strong> (Barley Wine aged in Marsala Barrels Norris)</li>
                    <li>1× <strong>1x El Pedro</strong> (Barley Wine aged in Pedro Ximenez Barrels)</li>
                    <li>1× <strong>1x Madame Galaxie</strong> (Saison aged in Chardonnay Barrels)</li>
                    <li>1× <strong>1x Bicchiere Brewfist</strong> (modello Napoleon)</li>
                  </ul>
                </div>
            </div>
<!-- box fine -->


<!-- six box inizio -->
            <div class="beer-box">
              <h3 class="beer-box__title">Six Box - Loverbeer</h3>
              <figure class="beer-box__figure">
                <img src="https://marcolago.com/misc/codepen/wpmeetup/rightbeer/six-box-logo.svg" alt="SIX BOX">
                <div class="beer-box__price">
                  <h4>€ 62,30</h4>
                  <p>con consegna a domicilio</p>
                </div>
              </figure>
                <div class="beer-box__picture">
                  <img src="https://marcolago.com/misc/codepen/wpmeetup/rightbeer/box/loverbeer.jpg" alt="Six Box - Loverbeer">
                </div>
                <div class="beer-box__content">
                  <p>6 bottiglie da 37,50 cl</p>
                  <ul>
<li>1× <strong>Beerbrugna</strong> (Wild Sour Aged Fruit Ale)</li>
<li>1× <strong>Pruss Perdù</strong> (Wild Sour Aged Fruit Ale)</li>
<li>1× <strong>Violetta</strong> (Wild Farmhouse Ale with Violetta)</li>
<li>1× <strong>Lale</strong> (Wild Sour Aged Fruit Ale with Cherries)</li>
<li>1× <strong>Binde</strong> (Wild Sour Aged Ale with Brett)</li>
<li>1× <strong>Papessa</strong> (Russian Imperial Stout)</li>
                  </ul>
                </div>
            </div>
<!-- box fine -->


<!-- big box inizio -->
            <div class="beer-box">
              <h3 class="beer-box__title">Big Box - Ayinger</h3>
              <figure class="beer-box__figure">
                <img src="https://marcolago.com/misc/codepen/wpmeetup/rightbeer/big-box-logo.svg" alt="BIG BOX">
                <div class="beer-box__price">
                  <h4>€ 58,00</h4>
                  <p>con consegna a domicilio</p>
                </div>
              </figure>
                <div class="beer-box__picture">
                  <img src="https://marcolago.com/misc/codepen/wpmeetup/rightbeer/box/ayinger.jpg" alt="Big Box - Ayinger">
                </div>
                <div class="beer-box__content">
                  <p>20 bottiglie miste</p>
                  <ul>
<li>4× <strong>Brauweisse</strong> – 50 cl</li>
<li>4× <strong>Lager Hell</strong> – 50 cl</li>
<li>4× <strong>Altbairisch Dunkel</strong> – 50 cl</li>
<li>4× <strong>Bairisch Pils</strong> – 33 cl</li>
<li>4× <strong>Celebrator</strong> – 33 cl</li>
                  </ul>
                </div>
            </div>
<!-- box fine -->
  </div>

              
            
!

CSS

              
                :root {
  --brand-yellow: #ffd84b;
  --brand-yellow--dark: #ffc243;

  --page-width: 80%;
  --page-max-width: 90em;
}

html {
  box-sizing: border-box;
  height: 100%;
}

*, *:before, *:after {
  box-sizing: inherit;
}

* {
  margin: 0;
}

* + *:not[div] {
  margin-top: 1.68em;
}

body {
  font-family: sans-serif;
  line-height: 1.68;
  margin: 0;
  padding: 0;
  min-height: 100%;
  position: relative;
}

body:before {
  content: "";
  height: 50vh;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  background-image: linear-gradient(to bottom, var(--brand-yellow--dark) 0, var(--brand-yellow) 25%, transparent);
  background-size: 100% auto;
  background-position: 100% 0;
  background-repeat: no-repeat;
}

body:after {
  /*! content: ""; */
  /*! height: 60%; */
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background-image: url(../img/bg-bottom.png);
  background-size: 100% auto;
  background-position: 100% 100%;
  background-repeat: no-repeat;
}

h1, h2, h3, h4, h5, h6 {
  font-size: 2em;
  line-height: 1.26;
  text-transform: uppercase;
}

p {
  font-size: 1.13em;
}

img {
  max-width: 100%;
  height: auto;
}

._at {
  display: none;
}

.button {
  font-weight: 700;
  color: black;
  text-align: center;
  text-transform: uppercase;
  text-decoration: none;
  display: inline-block;
  margin: 1em 0;
  padding: 1em 2em;
  position: relative;
  top: 0;
  border-radius: 0.5em;
  box-shadow: 0 6px 0 0 var(--brand-yellow--dark), 0 7px 1px 0 rgba(0,0,0,0.2);
  overflow: hidden;
  transition: all 0.2s;
}

.button:hover {
  top: 4px;
  box-shadow: 0 2px 0 0 var(--brand-yellow--dark), 0 3px 1px 0 rgba(0,0,0,0.3);
}

.button:before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: -2;
  background-color: var(--brand-yellow);
}

.button:after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: -1;
  background-image: linear-gradient(to bottom, var(--brand-yellow--dark), var(--brand-yellow));
  opacity: 0;
  transition: opacity 0.5s;
}

.button:hover:after {
  opacity: 1;
}

.logo-image {
  /*! max-width: 15em; */
  /*! display: inline-block; */
}

.hero {
  width: var(--page-width);
  max-width: var(--page-max-width);
  height: 100%;
  min-height: 100vh;
  margin: 0 auto;


  display: grid;
  grid-template-columns: 6fr minmax(100px, 2fr) minmax(100px, 2fr) 6fr;
  grid-template-rows: minmax(160px, auto) minmax(50px, auto) 1fr;

  position: relative;
  z-index: 1000;
}

.logo {
  text-align: center;
  grid-column-start: 2;
  grid-column-end: 4;
  grid-row-start: 1;
  grid-row-end: 3;
  filter: drop-shadow(1px 1px 5px rgba(0,0,0,0.2));
}

.bottles {
  grid-row-start: 2;
  grid-row-end: 4;
  grid-column-start: 1;
  grid-column-end: 3;
}

.content {
  grid-row-start: 3;
  grid-row-end: 4;
  grid-column-start: 3;
  grid-column-end: 5;
}

.beer-boxes {
  width: var(--page-width);
  max-width: var(--page-max-width);
  margin: 0 auto;


  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-column-gap: 1.68em;
  grid-row-gap: 1.68em;
}

.beer-box {
  display: grid;
  grid-template-areas:  'title'
                        'figure'
                        'picture'
                        'content';
  grid-row: span 4;
  grid-template-rows: repeat(5, min-content);
  grid-template-rows: subgrid;

  align-items: start;
}

.beer-box__title {
  grid-area: title;
}

.beer-box__figure {
  padding: 0.5em;
  grid-area: figure;
  background-color: var(--brand-yellow);
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.beer-box__figure > * {
  max-width: 10em;
  flex: 0 1 30%;
}

.beer-box__price {
  text-align: right;
}

.beer-box__picture {
  grid-area: picture;
}

.beer-box__content {
  grid-area: content;
  columns: 2;
}

.beer-box__content p {
  column-span: all;
}

.beer-box__content ul,
.beer-box__content li {
  margin: 0;
  padding: 0;
  display: block;
}
              
            
!

JS

              
                
              
            
!
999px

Console