<article>
  <header>
    <h1>Littleneck Clams</h1>
    <p class="description">Littlneck clams have a sweet, salty, mild flavor. All Publix littleneck clams are farm raised in Florida, and cleaned so grit and sand is removed. Store in a well-ventilated container covered with a damp cloth in the refrigerator and only rinse in fresh water just prior to cooking.</p>
    <img src="https://www.publix.com/-/media/aprons/images/2014/05/27/12/17/frs0016_600x440.ashx" alt="" />
  </header>
  <main>
    <section class="recipe">
      <h2>Clams in garline-wine broth</h2>
      <dl>
        <dt>Total Time</dt>
        <dd>20 minutes</dd>
        <dt>Servings</dt>
        <dd>4</dd>
      </dl>
      <h3>Ingredients</h3>
      <ul>
        <li>1 tablespoon unsalted butter</li>
        <li>1 tablespoon garlic, chopped</li>
        <li>3 lb littleneck clams, rinsed</li>
        <li>1 (14.5-oz) can chicken broth</li>
        <li>1 cup white wine</li>
      </ul>
      <h3>Steps</h3>
      <ol>
        <li><strong>Preheat</strong> large saute pan on medium. Place butter in pan, then add garlic and clams; cook 2-3 minutes or until garlic becomes fragrant.</li>
        <li><strong>Add</strong> chicken broth and white wine; cook 6-8 minutes or until liquid is reduced by one-half and clam shells are open. Discard clams that remain closed after cooking.</li>
      </ol>
      <p><small>Calories (per 1/4 recipe) 160kcal; Fat 4.5g; <abbr title="Cholesterol">Chol</abbr> 40mg; Sodium 570mg; <abbr title="Charbohidrates">Carb</abbr> 5g; Fiber 0g; Protein 14g; <abbr title="Vitamin">Vit</abbr> A 8%; <abbr title="Vitamin">Vit</abbr> C 20%; <abbr title="Calcium">Cal</abbr> 6%; Iron 80%</small></p>
    </section>
    <aside>
      <h3>Other preparation method</h3>
      <p><strong>Steam: </strong>Bring 2 cups seafood stock to a boil in a large stock pot on high. Place 3 lb rinsed clams in a steamer basket and add to pot. Cover and cook 6-8 minutes or until clams open. Serve with lemon wedges. Discard clams that remain closed after cooking.</p>
    </aside>
  </main>
  <footer>
    <p>For more recipes, visit <a href="https://publix.com/aprons">publix.com/aprons</a></p>
    <img src="https://nc.publix.com/img/aprons-recipes.jpg" alt="" />
  </footer>
</article>
/* Normalizing */
img {
  width: 100%;
}
* {
  box-sizing: border-box;
}

/* Typographic styling */
body {
  font-family: sans-serif;
}
h1, h2, h3 {
  color: #666;
  font-weight: normal;
}
h1, h2 {
  text-transform: lowercase;
}
h1 {
  font-size: 2.4em;
}
h2 {
  font-size: 1.8em;
}
h3 {
  text-transform: uppercase;
}
.description {
  font-style: italic;
}
footer p {
  text-transform: lowercase;
  font-variant: small-caps;
}
footer p a {
  font-variant: normal;
}

/* Initialize multi-column grid at medium-width breakpoint */
@media only screen and (min-width: 44em) {
  article {
    display: grid;
    grid-template-columns: auto auto auto;
  }
  header, main, footer {
    display: grid;
    grid-template-columns: 30% auto auto;
    grid-column: 1 / span 3;
  }
  header > *, main > *, footer > * {
    padding: 1vw;
  }
  header h1 {
    grid-column: 2 / span 2;
  }
  header img {
    grid-column: 2 / span 2;
  }
  aside {
    order: -1;
    align-self: end;
  }
  .recipe {
    grid-column: span 2;
  }
  footer img {
    order: -1;
    align-self: start;
  }
  h1 {
    margin-bottom: 0;
  }
  h1, h2, aside h3 {
    margin-top: 0;
  }
  h2 {
    margin-bottom: .25em;
  }
  p {
    margin: 0;
  }

  /* Display recipe details inline */
  dl, dt, dd {
    margin: 0;
  }
  dt, dd {
    display: inline;
  }
  dd:first-of-type:after {
    content: " • "
  }
  /* Display recipe ingredients in two columns */
  ul {
    -webkit-column-count: 2;
  }
  ul li {
    display: inline-block;
  }
}
@media only screen and (min-width: 60em) {
  body {
    max-width: 54em;
    margin: auto;
  }
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.