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 includes JSX processing.

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

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

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

              
                <!--New Section-->
<section class="promo divider main-color">
  <img src="http://placehold.it/200x100" alt="Publix logo" />
  <h2>Publix Breakfast Sale</h2>
  <ul>
    <li>Lots of values to choose</li>
    <li><span class="callout-text">Over $583 in savings</span> <span>in this week's ad</li>
  </ul>
</section>
<ul class="thirds grid">
  <li class="two-thirds item grid">
    <img class="primary-item" src="http://placehold.it/700x400" alt="Photo of item" />
    <dl class="item--info centered">
      <div class="standard--info swapped">
        <dt class="item-name">T-Bone Steaks*</dt>
        <dd class="item-price">6<sup>99</sup><sub>lb</sub></dd>
      </div>
      <div class="extra--info">
        <dd class="item-details">Publix Premium USDA Choice Beef</dd>
        <dd class="highlighted loud">Save up to 4.00 lb</dd>
        <dd class="item-details">(Porterhouse Steaks ... 7.49 lb)</dd>
      </div>
    </dl>
    <img class="secondary-item" src="http://placehold.it/500x200" alt="Photo of item" />
    <dl class="item--info centered">
      <div class="standard--info swapped">
        <dt class="item-name">Eat Smart Vegetables*</dt>
        <div class="item-price">
          <dd class="special reverse-color">Buy 1 Get 1</dd>
          <dd class="highlighted">Free</dd>
        </div>
      </div>
      <div class="extra--info">
        <dd class="item-details">Microwaveable, Assorted Varieties, Great Side Dish, Ready-in-Minutes, 10 or 12-oz pkg.</dd>
        <dd class="highlighted loud">Save up to 2.99</dd>
      </div>
    </dl>
  </li>
  <li class="combo item half grid">
    <div>
      <p class="item-name">Rise and shine</p>
      <p class="item-details">Turn breakfast into a savory morning treat.</p>
      <img src="http://placehold.it/500x200" alt="Photo of item" />
    </div>
    <div>
      <dl class="item--info">
        <div class="standard--info">
          <dt class="item-name">Sliced Bagels, 4-Count*</dt>
          <dd class="item-price">1<sup>00</sup></dd>
        </div>
        <div class="extra--info">
          <dd class="item-details">Your Choice of Assorted Flavors, From the Publix Bakery, 12-oz pkg.</dd>
          <dd class="highlighted loud">Save up to .89</dd>
        </div>
      </dl>
      <dl class="item--info">
        <div class="standard--info">
          <dt class="item-name">Vita Cold Smoked Nova Salmon*</dt>
          <div class="item-price">
            <dd class="special reverse-color">Buy 1 Get 1</dd>
            <dd class="highlighted">Free</dd>
          </div>
        </div>
        <div class="extra--info">
          <dd class="item-details">Wild, 8-oz pkg.</dd>
          <dd class="highlighted loud">Save up to 8.99</dd>
        </div>
      </dl>
    </div>
  </li>
  <!--New Row-->
  <li class="item">
    <img src="http://placehold.it/500x200" alt="Photo of item" />
    <dl class="item--info">
      <div class="standard--info">
        <dt class="item-name">Publix Deli Smoked Tavern Ham*</dt>
        <dd class="item-price">7<sup>99</sup><sub>lb</sub></dd>
      </div>
      <div class="extra--info">
        <dd class="item-details">Try in an Omelet with Fresh Diced Vegetables, Sliced Fresh in the Publix Deli</dd>
        <dd class="highlighted loud">Save up to 1.00 lb</dd>
      </div>
    </dl>
  </li>
  <li class="item">
    <img src="http://placehold.it/500x200" alt="Photo of item" />
    <dl class="item--info">
      <div class="standard--info">
        <dt class="item-name">Public Deli Jeweled Brie Mini Platter</dt>
        <dd class="item-price">11<sup>99</sup></dd>
      </div>
      <div class="extra--info">
        <dd class="item-details">Perfect Mini Platter for Two, Try With a Light to Medium Red Wine, 20-oz tray</dd>
        <dd class="highlighted loud">Save up to 4.00</dd>
      </div>
    </dl>
  </li>
  <li class="item">
    <img src="http://placehold.it/500x200" alt="Photo of item" />
    <dl class="item--info">
      <div class="standard--info">
        <dt class="item-name">Publix Baby Spinach</dt>
        <div class="item-price">
          <dd class="special">2 for</dd>
          <dd>5<sup>00</sup></dd>
        </div>
      </div>
      <div class="extra--info">
        <dd class="item-details">High in Vitamins A, C, and Folate, A Good Source of Magnesium, 6-oz pkg.</dd>
        <dd class="highlighted loud">Surprisingly low price</dd>
        <dd class="item-details">(Campari Tomatoes, 16-oz cont.: 2.99)</dd>
      </div>
    </dl>
  </li>
  <!--New Row-->
  <li class="item">
    <img src="http://placehold.it/500x200" alt="Photo of item" />
    <dl class="item--info">
      <div class="standard--info">
        <dt class="item-name">General Mills Honey Nut Cheerios Cereal</dt>
        <div class="item-price">
          <dd class="special reverse-color">Buy 1 Get 1</dd>
          <dd class="highlighted">Free</dd>
        </div>
      </div>
      <div class="extra--info">
        <dd class="item-details">17 or 18-oz, Cinnamon Toast Crunch, 16.2-oz, Chex or Reese's Puffs, 18-oz, Lucky Charms, 16-oz, Trix, 14.8-oz, or Cookie Crisps, 15.6-oz box</dd>
        <dd class="highlighted loud">Save up to 4.99</dd>
      </div>
    </dl>
  </li>
  <li class="item">
    <img src="http://placehold.it/500x200" alt="Photo of item" />
    <dl class="item--info">
      <div class="standard--info">
        <dt class="item-name">Folgers Ground Coffee</dt>
        <dd class="item-price">7<sup>49</sup></dd>
      </div>
      <div class="extra--info">
        <dd class="item-details">Assorted varieties, 24.2 to 30.5-oz can</dd>
        <dd class="highlighted loud">Save up to 1.28</dd>
      </div>
    </dl>
  </li>
  <li class="item">
    <img src="http://placehold.it/500x200" alt="Photo of item" />
    <dl class="item--info">
      <div class="standard--info">
        <dt class="item-name">Simply Orange 100% Orange Juice</dt>
        <dd class="item-price">5<sup>49</sup></dd>
      </div>
      <div class="extra--info">
        <dd class="item-details">With Calcium and Vitamin D Pulp Free or Pulp Free, 89-oz cont.</dd>
        <dd class="highlighted loud">Save up to 1.50</dd>
      </div>
    </dl>
  </li>
</ul>
<!--New Section-->
<section class="promo divider main-color">
  <img src="http://placehold.it/700x300" alt="Breakfast sale" />
  <div class="">
    <h1>Rise and shine for breakfast time!</h1>
    <h2>Save on the most highlighted meal of the day.</h2>
  </div>
</section>
<ul class="thirds grid">
  <!--New row-->
  <li class="minor item">
    <img src="http://placehold.it/100x100" alt="Photo of item" />
    <dl class="item--info">
      <div class="standard--info">
        <dt class="item-name">Smithfield Bacon</dt>
        <div class="item-price">
          <dd class="special">Buy 2 Get 1</dd>
          <dd class="highlighted">Free</dd>
        </div>
      </div>
      <div class="extra--info">
        <dd class="item-details">Hickory Smoke: Regular or Thick Sliced; or Lower Sodium, 16-oz pkg.</dd>
        <dd class="highlighted loud">Save up to 8.99 on 3</dd>
      </div>
    </dl>
  </li>
  <li class="minor item">
    <img src="http://placehold.it/100x100" alt="Photo of item" />
    <dl class="item--info">
      <div class="standard--info">
        <dt class="item-name">Sargento Shredded Cheese</dt>
        <div class="item-price">
          <dd class="special reverse-color">Buy 1 Get 1</dd>
          <dd class="highlighted">Free</dd>
        </div>
      </div>
      <div class="extra--info">
        <dd class="item-details">Assorted Varieties, 5 to 8-oz. pkg.</dd>
        <dd class="highlighted loud">Save up to 4.39</dd>
      </div>
    </dl>
  </li>
  <li class="minor item">
    <img src="http://placehold.it/100x100" alt="Photo of item" />
    <dl class="item--info">
      <div class="standard--info">
        <dt class="item-name">Starbucks Coffee K-Cups Packs</dt>
        <dd class="item-price">6<sup>99</sup></dd>
      </div>
      <div class="extra--info">
        <dd class="item-details">Or Tazo Tea or Starbucks Hot Cocoa, 6 or 10-ct. box or Starbucks Coffee, 10 to 12-oz bag, Assorted Varieties</dd>
        <dd class="highlighted loud">Save up to 3.00</dd>
      </div>
    </dl>
  </li>
  <!--New Row-->
  <li class="minor item">
    <img src="http://placehold.it/100x100" alt="Photo of item" />
    <dl class="item--info">
      <div class="standard--info">
        <dt class="item-name">Califia Farms Almondmilk</dt>
        <div class="item-price">
          <dd class="special">2 for</dd>
          <dd>7<sup>00</sup></dd>
        </div>
      </div>
      <div class="extra--info">
        <dd class="item-details">Or Cold Brew Coffee, Assorted Varieties, 48-oz bot.</dd>
        <dd class="highlighted loud">Save up to .98 on 2</dd>
      </div>
    </dl>
  </li>
  <li class="minor item">
    <img src="http://placehold.it/100x100" alt="Photo of item" />
    <dl class="item--info">
      <div class="standard--info">
        <dt class="item-name">Nestle Coffee-mate Creamer</dt>
        <div class="item-price">
          <dd class="special">2 for</dd>
          <dd>5<sup>00</sup></dd>
        </div>
      </div>
      <div class="extra--info">
        <dd class="item-details">Assorted Varieties, 32-oz bot.</dd>
        <dd class="highlighted loud">Save up to 1.38 on 2</dd>
      </div>
    </dl>
  </li>
  <li class="minor item">
    <img src="http://placehold.it/100x100" alt="Photo of item" />
    <dl class="item--info">
      <div class="standard--info">
        <dt class="item-name">Fairlife Ultra-Filtered Milk</dt>
        <div class="item-price">
          <dd class="special">2 for</dd>
          <dd>6<sup>00</sup></dd>
        </div>
      </div>
      <div class="extra--info">
        <dd class="item-details">Assorted Varieties, 52-oz bot.</dd>
        <dd class="highlighted loud">Save up to 1.98 on 2</dd>
      </div>
    </dl>
  </li>
  <!--New Row-->
  <li class="minor item">
    <img src="http://placehold.it/100x100" alt="Photo of item" />
    <dl class="item--info">
      <div class="standard--info">
        <dt class="item-name">Noosa Finest Yoghurt</dt>
        <div class="item-price">
          <dd class="special">2 for</dd>
          <dd>4<sup>00</sup></dd>
        </div>
      </div>
      <div class="extra--info">
        <dd class="item-details">Aussie Culture, Colorado Fresh, Assorted Varieties, 8-oz cup</dd>
        <dd class="highlighted loud">Save up to .58 on 2</dd>
      </div>
    </dl>
  </li>
  <li class="minor item">
    <img src="http://placehold.it/100x100" alt="Photo of item" />
    <dl class="item--info">
      <div class="standard--info">
        <dt class="item-name">Entenmann's Donuts</dt>
        <div class="item-price">
          <dd class="special reverse-color">Buy 1 Get 1</dd>
          <dd class="highlighted">Free</dd>
        </div>
      </div>
      <div class="extra--info">
        <dd class="item-details">Assorted Varieties, 15 to 17.5-oz box</dd>
        <dd class="highlighted loud">Save up to 5.49</dd>
      </div>
    </dl>
  </li>
  <li class="minor item">
    <img src="http://placehold.it/100x100" alt="Photo of item" />
    <dl class="item--info">
      <div class="standard--info">
        <dt class="item-name">Pepperidge Farm Swirl Bread</dt>
        <div class="item-price">
          <dd class="special">2 for</dd>
          <dd>5<sup>00</sup></dd>
        </div>
      </div>
      <div class="extra--info">
        <dd class="item-details">Assorted Varieties, 14 or 16-oz loaf</dd>
        <dd class="highlighted loud">Save up to 2.98 on 2</dd>
      </div>
    </dl>
  </li>
  <!--New Row-->
  <li class="minor item">
    <img src="http://placehold.it/100x100" alt="Photo of item" />
    <dl class="item--info">
      <div class="standard--info">
        <dt class="item-name">Eggland's Best Eggs</dt>
        <div class="item-price">
          <dd class="special">2 for</dd>
          <dd>4<sup>00</sup></dd>
        </div>
      </div>
      <div class="extra--info">
        <dd class="item-details">Large, Grade A, 12-ct. ctn.</dd>
        <dd class="highlighted loud">Save up to 2.00 on 2</dd>
      </div>
    </dl>
  </li>
  <li class="minor item">
    <img src="http://placehold.it/100x100" alt="Photo of item" />
    <dl class="item--info">
      <div class="standard--info">
        <dt class="item-name">Nabisco belVita Breakfast Biscuits</dt>
        <div class="item-price">
          <dd class="special">2 for</dd>
          <dd>5<sup>00</sup></dd>
        </div>
      </div>
      <div class="extra--info">
        <dd class="item-details">Or Bites, 5-ct. 8.8 or 8.81-oz box or Newtons Cookies, 10-oz pkg., Assorted Varieties</dd>
        <dd class="highlighted loud">Save up to 2.38 on 2</dd>
      </div>
    </dl>
  </li>
  <li class="minor item">
    <img src="http://placehold.it/100x100" alt="Photo of item" />
    <dl class="item--info">
      <div class="standard--info">
        <dt class="item-name">Kellogg's Eggo Waffles</dt>
        <div class="item-price">
          <dd class="special">2 for</dd>
          <dd>5<sup>00</sup></dd>
        </div>
      </div>
      <div class="extra--info">
        <dd class="item-details">Assorted Varieties, 9.8 to 12.3-oz box</dd>
        <dd class="highlighted loud">Save up to 1.56 on 2</dd>
      </div>
    </dl>
  </li>
  <!--New Row-->
  <li class="minor item">
    <img src="http://placehold.it/100x100" alt="Photo of item" />
    <dl class="item--info">
      <div class="standard--info">
        <dt class="item-name">Pillsbury Rolls</dt>
        <div class="item-price">
          <dd class="special">3 for</dd>
          <dd>6<sup>00</sup></dd>
        </div>
      </div>
      <div class="extra--info">
        <dd class="item-details">Or Crescents, Assorted Varieties, 8 to 13.9-oz can</dd>
        <dd class="highlighted loud">Save up to 1.08 on 3</dd>
      </div>
    </dl>
  </li>
  <li class="minor item">
    <img src="http://placehold.it/100x100" alt="Photo of item" />
    <dl class="item--info">
      <div class="standard--info">
        <dt class="item-name">Nutella Hazelnut Spread</dt>
        <div class="item-price">
          <dd class="special">2 for</dd>
          <dd>6<sup>00</sup></dd>
        </div>
      </div>
      <div class="extra--info">
        <dd class="item-details">With Skim Milk &amp; Cocoa, 13-oz jar</dd>
        <dd class="highlighted loud">Save up to 1.58 on 2</dd>
      </div>
    </dl>
  </li>
  <li class="minor item">
    <img src="http://placehold.it/100x100" alt="Photo of item" />
    <dl class="item--info">
      <div class="standard--info">
        <dt class="item-name">Mrs. Butterworth's Syrup</dt>
        <div class="item-price">
          <dd class="special reverse-color">Buy 1 Get 1</dd>
          <dd class="highlighted">Free</dd>
        </div>
      </div>
      <div class="extra--info">
        <dd class="item-details">Thick-n-Rich: Original, Sugar Free, or Lite, 24-oz bot.</dd>
        <dd class="highlighted loud">Save up to 3.35</dd>
      </div>
    </dl>
  </li>
</ul>
<!--New Section-->
<div class="thirds grid">
  <div class="one-third">
    <ul>
      <li class="item">
        <img src="http://placehold.it/100x100" alt="Photo of item" />
        <dl class="item--info">
          <div class="standard--info">
            <dt class="item-name">19 Crimes Red Wine</dt>
            <dd class="item-price">9<sup>99</sup></dd>
          </div>
          <div class="extra--info">
            <dd class="item-details">750-mL bot. (Other 750-mL Varieties Also on Sale, See Store for Details)</dd>
            <dd class="highlighted loud">Save up to 1.00</dd>
          </div>
        </dl>
      </li>
      <li class="item">
        <img src="http://placehold.it/100x100" alt="Photo of item" />
        <dl class="item--info">
          <div class="standard--info">
            <dt class="item-name">The Original Dark Horse Rose Wine</dt>
            <dd class="item-price">7<sup>99</sup></dd>
          </div>
          <div class="extra--info">
            <dd class="item-details">750-mL bot. (Other 750-mL Varieties Also on Sale, See Store for Details)</dd>
            <dd class="highlighted loud">Surprisingly Low Price</dd>
          </div>
        </dl>
      </li>
      <li class="item">
        <img src="http://placehold.it/100x100" alt="Photo of item" />
        <dl class="item--info">
          <div class="standard--info">
            <dt class="item-name">Yellow Tail Chardonnay Wine</dt>
            <dd class="item-price">9<sup>99</sup></dd>
          </div>
          <div class="extra--info">
            <dd class="item-details">1.5-mL bot. (Other 1.5-mL Varieties Also on Sale, See Store for Details)</dd>
            <dd class="highlighted loud">Surprisingly Low Price</dd>
          </div>
        </dl>
      </li>
      <li class="item">
        <dl class="item--info">
          <div class="standard--info">
            <dt class="item-name">Ghost Pines Cabernet Sauvignon Wine</dt>
            <dd class="item-price">16<sup>59</sup></dd>
          </div>
          <div class="extra--info">
            <dd class="item-details">750-mL bot. (Other 750-mL Varieties Also on Sale, See Store for Details)</dd>
          </div>
        </dl>
      </li>
      <li class="item">
        <dl class="item--info">
          <div class="standard--info">
            <dt class="item-name">Leese-Fitch Pinot Noir Wine</dt>
            <dd class="item-price">9<sup>99</sup></dd>
          </div>
          <div class="extra--info">
            <dd class="item-details">750-mL bot. (Other 750-mL Varieties Also on Sale, See Store for Details)</dd>
          </div>
        </dl>
      </li>
      <li class="item">
        <dl class="item--info">
          <div class="standard--info">
            <dt class="item-name">Flip Flop Pinot Grigio Wine</dt>
            <dd class="item-price">4<sup>69</sup></dd>
          </div>
          <div class="extra--info">
            <dd class="item-details">750-mL bot. (Other 750-mL Varieties Also on Sale, See Store for Details)</dd>
          </div>
        </dl>
      </li>
    </ul>
  </div>
  <div class="two-thirds inset item">
    <div class="recipe--header">
      <p>Dinner for four, $20* or less</p>
      <img src="http://placehold.it/800x200" alt="Photo of item">
    </div>
    <div class="recipe--contents">
      <p class="recipe--sticker">Dinner ready in 30 minutes</p>
      <h3 class="recipe--title">Breaded fish with herbed beans and quinoa blend</h3>
      <ul class="recipe list">
        <li>2 (12-oz) boxes frozen Publix Premium Panko-Breaded Wild Alaskan Pollock Fillets (about 8 pieces)</li>
        <li>1 (10-oz) package frozen Path of Life Mediterranean Quinoa</li>
        <li>1/2 cup green onions, thinly sliced</li>
        <li>1 (15.5-oz) can Bush's Best Cannellini Beans, drained</li>
        <li>3 tablespoons Kerrygold Garlic &amp; Herb Irish Butter</li>
      </ul>
      <ol>
        <li><strong>Preheat</strong> oven to 425&deg;F. Bake fish following package instructions.</li>
        <li><strong>Microwave</strong> quinoa blend following package instructions. Slice onions.</li>
        <li><strong>Place</strong> beans in a microwave-safe dish; cover and microwave on HIGH for 1-2 minutes, or until hot. Stir in butter and onions. Serve with quinoa and fish.</li>
      </ol>
    </div>
    <div class="recipe--extras grid">
      <div class="main">
        <p class="title-ribbon">Shopping list</p>
        <ul>
          <li class="item">
            <dl class="item--info">
              <div class="standard--info">
                <dt class="item-name">Green Scallion Onions</dt>
                <dd class="item-price">2/1.19</dd>
              </div>
              <div class="extra--info">
                <dd class="item-details">Great in Salads or Recipes, each bunch</dd>
              </div>
            </dl>
          </li>
          <li class="item">
            <dl class="item--info">
              <div class="standard--info">
                <dt class="item-name">Bush's Best Beans</dt>
                <dd class="item-price">10/10.00</dd>
              </div>
              <div class="extra--info">
                <dd class="item-details">Assorted Varieties, 15 to 16-oz can (Excluding Baked, Chili, Butter and Green &amp; Shelly)</dd>
              </div>
            </dl>
          </li>
          <li class="item">
            <dl class="item--info">
              <div class="standard--info">
                <dt class="item-name">Path of Life Frozen Vegetables</dt>
                <dd class="item-price">3.59</dd>
              </div>
              <div class="extra--info">
                <dd class="item-details">Assorted Varieties, 10-oz bag</dd>
              </div>
            </dl>
          </li>
          <li class="item">
            <dl class="item--info">
              <div class="standard--info">
                <dt class="item-name">Publix Premium Pollock Fillets</dt>
                <div class="item-price">
                  <dd class="special reverse-color">Buy 1 Get 1</dd>
                  <dd class="highlighted">Free</dd>
                </div>
              </div>
              <div class="extra--info">
                <dd class="item-details">Panko Breaded, Frozen, Wild, 12-oz box</dd>
                <dd class="highlighted loud">Save up to 6.99</dd>
              </div>
            </dl>
          </li>
          <li class="item">
            <dl class="item--info">
              <div class="standard--info">
                <dt class="item-name">Kerrygold Irish Butter</dt>
                <dd class="item-price">2/3.00</dd>
              </div>
              <div class="extra--info">
                <dd class="item-details">Garlic &amp; Herb, 3.5-oz stick</dd>
              </div>
            </dl>
          </li>
        </ul>
        <p><small>*"Dinner for four, $20 or less" does not include suggested wine pairings, Aprons Advice, or items listed that you may already have in your pantry, such as cooking spray. Total cost includes price reductions on sale items.</small></p>
      </div>
      <div class="footer">
        <p>A few more items to make it just right?</p>
        <dl>
          <dt>Aprons advice</dt>
          <dd>Complete your meal with fresh salad kit, whole wheat bread, SToK Cold-Brew Iced Coffee and International Delight French Vanilla Gourmet Coffee Creamer. For dessert, make fresh-baked cookies with Nestle Toll House Chocolate Chip Cookie Dough.</dd>
        </dl>
      </div>
      <div class="sidebar">
        <img src="http://placehold.it/400x200" alt="Photo of item" />
        <p>14 Hands Chardonnay shows some bright citrus notes and vibrant acidity that makes it a natural pairing with fish. The wine's subtle toasty notes complement the nutty flavor of the quinoa while its silky mouthfeel plays well against the velvety texture of the beans.</p>
        <p>For more recipes, vitis <a href="http://publix.com/aprons">publix.com/aprons</a></p>
      </div>
    </div>
  </div>
</div>
<!--New Section-->
<div class="thirds grid">
  <div class="one-third push-content">
    <div class="inset">
      <p>Can't find it in our seafood case? If it's in season and available, we can typically get it for you within two days. Put in your request with a Seafood specialist today! See our variety at publix.com/reelvariety.</p>
      <ul>
        <li class="item">
          <dl class="item--info">
            <div class="standard--info">
              <dt class="item-name">Haddock Fillets</dt>
              <div class="item-price">10<sup>99</sup><sub>lb</sub></div>
            </div>
            <div class="extra--info">
              <dd class="item-details">Fresh, Wild</dd>
            </div>
          </dl>
        </li>
        <li class="item">
          <dl class="item--info">
            <div class="standard--info">
              <dt class="item-name">Arctic Char Fillets</dt>
              <div class="item-price">12<sup>99</sup><sub>lb</sub></div>
            </div>
            <div class="extra--info">
              <dd class="item-details">Fresh, Farm-Raised</dd>
            </div>
          </dl>
        </li>
        <li class="item">
          <dl class="item--info">
            <div class="standard--info">
              <dt class="item-name">Corvina Fillets</dt>
              <div class="item-price">12<sup>99</sup><sub>lb</sub></div>
            </div>
            <div class="extra--info">
              <dd class="item-details">Fresh, Wild</dd>
            </div>
          </dl>
        </li>
      </ul>
    </div>
  </div>
  <div class="two-thirds">
    <h2 class="banner divider main-color centered">Dinner in sounds nice.</h2>
    <div class="half grid">
      <section class="single-category">
        <ul>
          <li class="item">
            <img src="http://placehold.it/500x300" alt="Photo of item" />
            <div>
              <dl class="item--info">
                <div class="standard--info">
                  <dt class="item-name">Fresh Tilapia Fillets*</dt>
                  <dd class="item-price">4<sup>99</sup><sub>lb</sub></dd>
                </div>
                <div class="extra--info">
                  <dd class="item-details">Farm-Raised</dd>
                  <dd class="highlighted loud">Save up to 3.00 lb</dd>
                </div>
              </dl>
              <dl class="item--info">
                <div class="standard--info">
                  <dt class="item-name">Progresso Bread Crumbs*</dt>
                  <div class="item-price">
                    <dd class="special">2 for</dd>
                    <dd>3<sup>00</sup></dd>
                  </div>
                </div>
                <div class="extra--info">
                  <dd class="item-details">Italian Style or Plain, 15-oz cnstr.</dd>
                  <dd class="highlighted loud">Save up to .78 on 2</dd>
                </div>
              </dl>
            </div>
          </li>
          <li class="item">
            <img src="http://placehold.it/500x200" alt="Photo of item" />
            <dl class="item--info">
              <div class="standard--info">
                <dt class="item-name">Extra Large White Shrimp*</dt>
                <dd class="item-price">7<sup>99</sup><sub>lb</sub></dd>
              </div>
              <div class="extra--info">
                <dd class="item-details">Easy-to-Peel, Previously Frozen, Farmed, 21 to 25 per Pund</dd>
                <dd class="highlighted loud">Save up to 4.00 lb</dd>
                <dd class="item-details">(Jumbo White Shrimp, Peeled and Deveined, 21 to 30 per Pound ... 8.99 lb)</dd>
              </div>
            </dl>
          </li>
          <li class="item--group">
            <ul>
              <li class="item">
                <dl class="item--info">
                  <div class="standard--info">
                    <dt class="item-name">Cook-in-Bag Shirmp 'N Grits Dinner</dt>
                    <dd class="item-price">5<sup>99</sup></dd>
                  </div>
                  <div class="extra--info">
                    <dd class="item-details">Fresh, Ready-to-Cook, Available in the Seafood Department, each</dd>
                  </div>
                </dl>
              </li>
              <li class="item">
                <dl class="item--info">
                  <div class="standard--info">
                    <dt class="item-name">Dungeness Crab Clusters</dt>
                    <dd class="item-price">10<sup>99</sup><sub>lb</sub></dd>
                  </div>
                  <div class="extra--info">
                    <dd class="item-details">Cooked, Previously Frozen, Wild</dd>
                  </div>
                </dl>
              </li>
              <li class="item">
                <dl class="item--info">
                  <div class="standard--info">
                    <dt class="item-name">Stuffed Clams or Scallops</dt>
                    <div class="item-price">
                      <dd class="special">10 for</dd>
                      <dd>10<sup>00</sup></dd>
                    </div>
                  </div>
                  <div class="extra--info">
                    <dd class="item-details">Previously Frozen, Wild, 4 or 5-oz each</dd>
                  </div>
                </dl>
              </li>
            </ul>
          </li>
        </ul>
      </section>
      <section class="single-category">
        <ul>
          <li class="item">
            <div>
              <dl class="item--info">
                <div class="standard--info">
                  <dt class="item-name">GreenWise Angus Bone-In Ribeye Steaks*</dt>
                  <dd class="item-price">11<sup>99</sup><sub>lb</sub></dd>
                </div>
                <div class="extra--info">
                  <dd class="item-details">USDA Choice Beef, Antibiotic-Free</dd>
                  <dd class="highlighted loud">Save up to 2.00 lb</dd>
                  <dd class="item-details">(Boneless ... 12.99 lb)</dd>
                </div>
              </dl>
              <dl class="item--info">
                <div class="standard--info">
                  <dt class="item-name">Publix Asparagus</dt>
                  <dd class="item-price">5<sup>99</sup></dd>
                </div>
                <div class="extra--info">
                  <dd class="item-details">With Italian Bread Crumbs, Ready-to-Cook, 8.5-oz pkg.</dd>
                  <dd class="highlighted loud">Surprisingly low price<dd>
                </div>
              </dl>
            </div>
            <img src="http://placehold.it/500x300" alt="Photo of item" />
          </li>
          <li class="item">
            <img src="http://placehold.it/500x200" alt="Photo of item" />
            <dl class="item--info">
              <div class="standard--info">
                <dt class="item-name">Publix Boneless Skinless Chicken Thighs</dt>
                <dd class="item-price">3<sup>49</sup><sub>lb</sub></dd>
              </div>
              <div class="extra--info">
                <dd class="item-details">Vegetable Fed</dd>
                <dd class="highlighted loud">Save up to .50 lb</dd>
                <dd class="item-details">(GreenWise Boneless Skinless Chicken Thighs, USDA Grade A, Antibiotic-Free ... 3.99 lb)</dd>
              </div>
            </dl>
          </li>
          <li class="item--group">
            <ul>
              <li class="item">
                <dl class="item--info">
                  <div class="standard--info">
                    <dt class="item-name">Chuck Short Ribs</dt>
                    <dd class="item-price">4<sup>99</sup><sub>lb</sub></dd>
                  </div>
                  <div class="extra--info">
                    <dd class="item-details">Publix Premium USDA Choice Beef</dd>
                  </div>
                </dl>
              </li>
              <li class="item">
                <dl class="item--info">
                  <div class="standard--info">
                    <dt class="item-name">Publix Chuck Roast</dt>
                    <dd class="item-price">13<sup>99</sup></dd>
                  </div>
                  <div class="extra--info">
                    <dd class="item-details">With Gravy and Vegetables, Ready-to-Cook, 28-oz pkg.</dd>
                  </div>
                </dl>
              </li>
              <li class="item">
                <dl class="item--info">
                  <div class="standard--info">
                    <dt class="item-name">Kentucky Legend Boneless Ham Steak</dt>
                    <div class="item-price">
                      <dd class="special">2 for</dd>
                      <dd>5<sup>00</sup></dd>
                    </div>
                  </div>
                  <div class="extra--info">
                    <dd class="item-details">Brown Sugar or Lower Sodium, Smoked, Fully Cooked, 8-oz pkg.</dd>
                  </div>
                </dl>
              </li>
            </ul>
          </li>
        </ul>
      </section>
    </div>
  </div>
</div>
<!--New Section-->
<h2 class="banner divider main-color centered">Here are some idea starters.</h2>
<div class="thirds grid">
  <ul class="one-third">
    <li class="combo item half grid">
      <div>
        <img src="http://placehold.it/500x400" alt="Photo of item">
      </div>
      <div>
        <dl class="item--info">
          <div class="standard--info">
            <dt class="item-name">Publix Premium Chicken Cutlets*</dt>
            <dd class="item-price">4<sup>49</sup><sub>lb</sub></dd>
          </div>
          <div class="extra--info">
            <dd class="item-details">99% Fat-Free, Vegetable-Fed</dd>
            <dd class="highlighted loud">Save up to 1.50 lb</dd>
            <dd class="item-details">(Amazing Taste Seasoning, Assorted Varieties, .75 or 1-oz pkg. ... .79)</dd>
          </div>
        </dl>
        <dl class="item--info">
          <div class="standard--info">
            <dt class="item-name">Publix Zucchini &amp; Yellow Squash</dt>
            <dd class="item-price">5<sup>99</sup></dd>
          </div>
          <div class="extra--info">
            <dd class="item-details">With Red Onion &amp; Herb Garlic Butter, Ready-to-Cook, 11-oz pkg.</dd>
            <dd class="highlighted loud">Surprisingly low price</dd>
          </div>
        </dl>
      </div>
    </li>
  </ul>
  <div class="two-thirds">
    <p>Fire up the grill</p>
    <p>Kick off grilling season by saving on all those juicy burgers.</p>
    <ul class="grid">
      <li class="two-thirds item grid">
        <img class="primary-item" src="http://placehold.it/700x400" alt="Photo of item" />
        <dl class="item--info centered">
          <div class="standard--info swapped">
            <dt class="item-name">Ground Sirloin*</dt>
            <dd class="item-price">4<sup>49</sup></dd>
          </div>
          <div class="extra--info">
            <dd class="item-details">Publix Beef, USDA-Inspected, 3-lb or More pkg.</dd>
            <dd class="highlighted loud">Save up to 1.20 lb</dd>
            <dd class="item-details">(Less Than 3-lb ... 4.99 lb)</dd>
          </div>
        </dl>
        <img class="secondary-item" src="http://placehold.it/500x200" alt="Photo of item" />
        <dl class="item--info centered">
          <div class="standard--info swapped">
            <dt class="item-name">Publix Creamy Homestyle Macaroni &amp; Cheese</dt>
            <div class="item-price">
              <dd class="special">2 for</dd>
              <dd>6<sup>00</sup></dd>
            </div>
          </div>
          <div class="extra--info">
            <dd class="item-details">20-oz pkg. or Traditional Style Mashed Potatoes, 24-oz pkg.</dd>
            <dd class="highlighted loud">Save up to .98 on 2</dd>
          </div>
        </dl>
      </li>
    </ul>
  </div>
</div>
<!--New Section-->
<div class="thirds grid">
  <section class="item">
    <img src="http://placehold.it/500x200" alt="Photo of item" />
    <dl class="item--info">
      <div class="standard--info">
        <dt class="item-name">Publix Whole Pork Tenderloin*</dt>
        <div class="item-price">
          <dd class="special">25%</dd>
          <dd>Off</dd>
        </div>
      </div>
      <div class="extra--info">
        <dd class="item-details">Boneless, Price Adjusted at Register</dd>
        <dd class="highlighted loud">Surprisingly low price</dd>
        <dd class="item-details">(Publix Bacon Wrapped Pork Tenderloin: Regular or Cajun Seasoned, Prepared Fresh in the Store ... 4.99 lb)</dd>
      </div>
    </dl>
  </section>
  <section class="item">
    <img src="http://placehold.it/500x200" alt="Photo of item" />
    <dl class="item--info">
      <div class="standard--info">
        <dt class="item-name">Publix Mild or Hot Italian Pork Sausage*</dt>
        <dd class="item-price">4<sup>99</sup></dd>
      </div>
      <div class="extra--info">
        <dd class="item-details">Our Exclusive Recipe, 20-oz tray</dd>
        <dd class="highlighted loud">Save up to 1.00</dd>
      </div>
    </dl>
  </section>
  <section class="item">
    <img src="http://placehold.it/500x200" alt="Photo of item" />
    <dl class="item--info">
      <div class="standard--info">
        <dt class="item-name">Publix Campfire Chicken</dt>
        <dd class="item-price">9<sup>99</sup></dd>
      </div>
      <div class="extra--info">
        <dd class="item-details">With Stir Fry Blend and Sausage, Ready-to-Cook; or Publix Campfire Italian Sausage: Mild or Hot, With Peppers and Onions, each</dd>
        <dd class="highlighted loud">Surprisingly low price</dd>
      </div>
    </dl>
  </section>
  <ul>
    <li class="item">
      <dl class="item--info">
        <div class="standard--info">
          <dt class="item-name">Publix Sliced Lunch Meats</dt>
          <div class="item-price">
            <dd class="special">2 for</dd>
            <dd>6<sup>00</sup></dd>
          </div>
        </div>
        <div class="extra--info">
          <dd class="item-details">Assorted Varieties, 7 or 9-oz pkg.</dd>
        </div>
      </dl>
    </li>
    <li class="item">
      <dl class="item--info">
        <div class="standard--info">
          <dt class="item-name">Oscar Mayer Lunchables</dt>
          <div class="item-price">
            <dd class="special">10 for</dd>
            <dd>10<sup>00</sup></dd>
          </div>
        </div>
        <div class="extra--info">
          <dd class="item-details">Assorted Varieties, 2.25 to 4.4-oz pkg.</dd>
        </div>
      </dl>
    </li>
    <li class="item">
      <dl class="item--info">
        <div class="standard--info">
          <dt class="item-name">Kiolbassa Smoked Sausage</dt>
          <div class="item-price">
            <dd class="special">Buy 2 Get 1</dd>
            <dd class="highlighted">Free</dd>
          </div>
        </div>
        <div class="extra--info">
          <dd class="item-details">Polish, Beef, Roasted Garlic, or Jalapeno, 13-oz pkg.</dd>
        </div>
      </dl>
    </li>
  </ul>
  <ul>
    <li class="item">
      <dl class="item--info">
        <div class="standard--info">
          <dt class="item-name">Publix Cheese Slices</dt>
          <div class="item-price">
            <dd class="special">2 for</dd>
            <dd>9<sup>00</sup></dd>
          </div>
        </div>
        <div class="extra--info">
          <dd class="item-details">Assorted Varieties, 16-oz pkg.</dd>
        </div>
      </dl>
    </li>
    <li class="item">
      <dl class="item--info">
        <div class="standard--info">
          <dt class="item-name">Sargento String Cheese</dt>
          <dd class="item-price">3<sup>99</sup></dd>
        </div>
        <div class="extra--info">
          <dd class="item-details">Or Cheese Sticks, Assorted Varieties, 9 or 12-oz pkg.</dd>
        </div>
      </dl>
    </li>
    <li class="item">
      <dl class="item--info">
        <div class="standard--info">
          <dt class="item-name">Publix Chunk Cheese</dt>
          <div class="item-price">
            <dd class="special">2 for</dd>
            <dd>5<sup>00</sup></dd>
          </div>
        </div>
        <div class="extra--info">
          <dd class="item-details">Assorted Varieties, 8-oz pkg.</dd>
        </div>
      </dl>
    </li>
  </ul>
  <section class="item">
    <img src="http://placehold.it/500x200" alt="Photo of item" />
    <dl class="item--info">
      <div class="standard--info">
        <dt class="item-name">Armour Meatballs</dt>
        <div class="item-price">
          <dd class="special reverse-color">Buy 1 Get 1</dd>
          <dd class="highlighted">Free</dd>
        </div>
      </div>
      <div class="extra--info">
        <dd class="item-details">Original, Italian, Turkey, or Beef, 11 or 14-oz pkg.</dd>
        <dd class="highlighted loud">Save up to 4.99</dd>
        <dd class="item-details">(Assorted La Famiglia DelGrosso Pasta Sauce, 16.9 or 26-oz jar ... <strong>Buy One Get One Free of Equal or Lesser Price</strong>)</dd>
      </div>
    </dl>
  </section>
</div>
<!--New Section-->
<div class="thirds grid">
  <div class="one-third push-content">
    <div class="inset">
      <ul>
        <li class="item">
          <dl class="item--info">
            <div class="standard--info">
              <dt class="item-name">Phalaenopsis Orchid</dt>
              <dd class="item-price">9<sup>99</sup></dd>
            </div>
            <div class="extra--info">
              <dd class="item-details">Assorted Colors, Long Lasting and Easy-to-Care for, 5-in pot</dd>
            </div>
          </dl>
        </li>
        <li class="item">
          <dl class="item--info">
            <div class="standard--info">
              <dt class="item-name">Mix Bunches</dt>
              <div class="item-price">
                <dd class="special">3 for</dd>
                <dd>10<sup>00</sup></dd>
              </div>
            </div>
            <div class="extra--info">
              <dd class="item-details">Alstroemeria, Sunflower, or Assorted Filler, each</dd>
            </div>
          </dl>
        </li>
      </ul>
    </div>
  </div>
  <div class="two-thirds">
    <h2 class="banner divider main-color centered">Save a little green.</h2>
    <div class="half grid">
      <section class="single-category">
        <ul>
          <li class="item">
            <img src="http://placehold.it/500x400" alt="Photo of item">
            <dl class="item--info">
              <div class="standard--info">
                <dt class="item-name">Strawberries</dt>
                <div class="item-price">
                  <dd class="special">2 for</dd>
                  <dd>5<sup>00</sup></dd>
                </div>
              </div>
              <div class="extra--info">
                <dd class="item-details">California-Grown, Sweet and Delicious, 16-oz pkg.</dd>
              </div>
            </dl>
          </li>
          <li class="item">
            <dl class="item--info">
              <div class="standard--info">
                <dt class="item-name">Red Raspberries</dt>
                <div class="item-price">
                  <dd class="special">2 for</dd>
                  <dd>6<sup>00</sup></dd>
                </div>
              </div>
              <div class="extra--info">
                <dd class="item-details">Great for Desserts or Snacking, 6-oz pkg.</dd>
              </div>
            </dl>
          </li>
        </ul>
      </section>
      <section>
        <ul>
          <li class="item">
            <dl class="item--info">
              <div class="standard--info">
                <dt class="item-name">Tree-Ripened Peaches or Nectarines</dt>
                <dd class="item-price">2<sup>99</sup><sub>lb</sub></dd>
              </div>
              <div class="extra--info">
                <dd class="item-details">California-Grown, A Good Source of Vitamin C</dd>
              </div>
            </dl>
          </li>
          <li class="item">
            <dl class="item--info">
              <div class="standard--info">
                <dt class="item-name">Buddy Fruits Pure Blended Fruit</dt>
                <div class="item-price">
                  <dd class="special reverse-color">Buy 1 Get 1</dd>
                  <dd class="highlighted">Free</dd>
                </div>
              </div>
              <div class="extra--info">
                <dd class="item-details">Or Fruits &amp; Vegetables, Assorted Varieties, 3.2-oz pkg.</dd>
                <dd class="highlighted loud">Save up to 1.00</dd>
              </div>
            </dl>
            <img src="http://placehold.it/500x400" alt="Photo of item">
          </li>
        </ul>
      </section>
      <section class="item">
        <img src="http://placehold.it/500x200" alt="Photo of item" />
        <dl class="item--info">
          <div class="standard--info">
            <dt class="item-name">Southern-Grown Vegetables</dt>
            <dd class="item-price">1<sup>69</sup><sub>lb</sub></dd>
          </div>
          <div class="extra--info">
            <dd class="item-details">Yellow or Zucchini Squash, Green Beans, or Eggplant, Perfect for Steaming or Grilling, Season-to-Taste</dd>
            <dd class="item-details">(Publix Green Beans, 1-lb bag ... 1.69)</dd>
          </div>
        </dl>
      </section>
      <section class="item">
        <img src="http://placehold.it/500x200" alt="Photo of item" />
        <dl class="item--info">
          <div class="standard--info">
            <dt class="item-name">Tomatoes on the Vine or Beefstaek Tomatoes</dt>
            <dd class="item-price">1<sup>69</sup><sub>lb</sub></dd>
          </div>
          <div class="extra--info">
            <dd class="item-details">Excellent for Sandwiches or in Fresh Salads</dd>
            <dd class="highlighted loud">Surprisingly low price</dd>
            <dd class="item-details">House Cucumbers, each ... <strong>Buy One Get One Free of Equal or Lesser Price)</strong></dd>
          </div>
        </dl>
      </section>
      <section class="item">
        <img src="http://placehold.it/500x200" alt="Photo of item" />
        <dl class="item--info">
          <div class="standard--info">
            <dt class="item-name">Publix Idaho Russet Potatoes*</dt>
            <dd class="item-price">3<sup>49</sup></dd>
          </div>
          <div class="extra--info">
            <dd class="item-details">High in Vitamin C and a Good Source of Potassium, 5-lb bag</dd>
            <dd class="highlighted loud">Save up to .50</dd>
            <dd class="item-details">(Vidalla Sweet Onions, Jumbo ... .99lb)</strong></dd>
        </div>
      </dl>
    </section>
  <section class="item">
    <img src="http://placehold.it/500x200" alt="Photo of item" />
    <dl class="item--info">
      <div class="standard--info">
        <dt class="item-name">Taylor Farms Chopped Salad Kit*</dt>
        <div class="item-price">
          <dd class="special">2 for</dd>
          <dd>6<sup>00</sup></dd>
        </div>
      </div>
      <div class="extra--info">
        <dd class="item-details">Assorted Varieties, Easy Enough to Make Any Night of the Week, 9.25 to 13.4-oz pkg.</dd>
        <dd class="highlighted loud">Save up to 1.98 on 2</dd>
        <dd class="item-details">(Heirloom Tomatoes, each pt ... 2/5.00)</dd>
      </div>
    </dl>
  </section>
</div>
</div>
</div>
<!--New Section-->
<h2 class="banner divider main-color centered">And add some color to your plate</h2>
<ul class="thirds grid">
  <li class="combo item half grid">
    <img src="http://placehold.it/500x400" alt="Photo of item" />
    <div>
      <dl class="item--info">
        <div class="standard--info">
          <dt class="item-name">Golden Kiss Melon</dt>
          <div class="item-price">
            <dd class="special">2 for</dd>
            <dd>6<sup>00</sup></dd>
          </div>
        </div>
        <div class="extra--info">
          <dd class="item-details">Or Athena Cantaloupe, New Crop, Excellent Flavor, Picked at the Peack of Ripeness, each</dd>
        </div>
      </dl>
      <dl class="item--info">
        <div class="standard--info">
          <dt class="item-name">Publix Red Seedless Watermelon</dt>
          <dd class="item-price">.59<sub>lb</sub></dd>
        </div>
        <div class="extra--info">
          <dd class="item-details">Quarter, High in Vitamin C and a Good Source of Vitamin A</dd>
        </div>
      </dl>
    </div>
  </li>
  <li class="item">
    <dl class="item--info centered">
      <div class="standard--info swapped">
        <dt class="item-name">Red Seedless Grapes</dt>
        <dd class="item-price">1<sup>49</sup><sub>lb</sub></dd>
      </div>
      <div class="extra--info">
        <dd class="item-details">Great for Snacking or Making Fresh Fruit Salad</dd>
        <dd class="highlighted loud">Surprisingly low price</dd>
        <dd class="item-details">(White Seedless Grapes ... 2.49 lb)</dd>
      </div>
    </dl>
    <img src="http://placehold.it/500x400" alt="Photo of item">
  </li>
  <li class="item">
    <img src="http://placehold.it/500x400" alt="Photo of item">
    <dl class="item--info centered">
      <div class="standard--info swapped">
        <dt class="item-name">Cherries</dt>
        <dd class="item-price">3<sup>99</sup><sub>lb</sub></dd>
      </div>
      <div class="extra--info">
        <dd class="item-details">California-Grown, Large, Sweet, and Juicy</dd>
      </div>
    </dl>
  </li>
  <li class="item">
    <img src="http://placehold.it/500x200" alt="Photo of item">
    <dl class="item--info">
      <div class="standard--info">
        <dt class="item-name">Honey Mango</dt>
        <div class="item-price">
          <dd class="special">10 for</dd>
          <dd>10<sup>00</sup></dd>
        </div>
      </div>
      <div class="extra--info">
        <dd class="item-details">A Good Source of Fiber and High in Vitamin C, each</dd>
        <dd class="highlighted loud">Surprisingly low price</dd>
        <dd class="item-details">(Hass Avocados, each ... 3/5.00)</dd>
      </div>
    </dl>
  </li>
  <li class="item">
    <img src="http://placehold.it/500x200" alt="Photo of item">
    <dl class="item--info">
      <div class="standard--info">
        <dt class="item-name">California Mandarins</dt>
        <dd class="item-price">4<sup>99</sup></dd>
      </div>
      <div class="extra--info">
        <dd class="item-details">Seedless and Easy-to-Peel, Great for Snacking, 3-lb bag (Persian Limes, each ... 4/1.00)</dd>
      </div>
    </dl>
  </li>
  <li class="item">
    <img src="http://placehold.it/500x200" alt="Photo of item">
    <dl class="item--info">
      <div class="standard--info">
        <dt class="item-name">Large Ambrosia Apples</dt>
        <dd class="item-price">2<sup>49</sup><sub>lb</sub></dd>
      </div>
      <div class="extra--info">
        <dd class="item-details">An Excellend Source of Fiber</dd>
        <dd class="highlighted loud">Save up to .50 lb</dd>
        <dd>(Medium Organic Red Delicious Apples, 2-lb bag ... 2.99)</dd>
      </div>
    </dl>
  </li>
  <li class="item">
    <img src="http://placehold.it/500x200" alt="Photo of item">
    <dl class="item--info">
      <div class="standard--info">
        <dt class="item-name">Organic Strawberries</dt>
        <dd class="item-price">3<sup>99</sup></dd>
      </div>
      <div class="extra--info">
        <dd class="item-details">High in Vitamins A and C, 16-oz pkg. (Organic Red Raspberries or Blackberries, 6-oz pkg. ... 2/7.00)</dd>
      </div>
    </dl>
  </li>
  <li class="item">
    <img src="http://placehold.it/500x200" alt="Photo of item">
    <dl class="item--info">
      <div class="standard--info">
        <dt class="item-name">Assorted Simply 100% Orange Juice</dt>
        <div class="item-price">
          <dd class="special">3 for</dd>
          <dd>10<sup>00</sup></dd>
        </div>
      </div>
      <div class="extra--info">
        <dd class="item-details">Or Apple or Grapefruit; Or Cranberry Cocktail, 59-oz cont.</dd>
        <dd class="highlighted loud">Save up to 1.97 on 3</dd>
        <dd class="item-details">(Assorted Simply Juice Drink, Limeade, or Lemonade, 59-oz pkg. ... 2/5.00)</dd>
      </div>
    </dl>
  </li>
  <li class="item">
    <img src="http://placehold.it/500x200" alt="Photo of item">
    <dl class="item--info">
      <div class="standard--info">
        <dt class="item-name">Pura Vida Floral Bouquet</dt>
        <dd class="item-price">9<sup>99</sup></dd>
      </div>
      <div class="extra--info">
        <dd class="item-details">Or EarthSmart, An Array of Vibrant Colors to Celebrate the Good Life, each</dd>
      </div>
    </dl>
  </li>
</ul>
<!--New Section-->
<h2 class="banner divider main-color centered">Indulge in something scrumptious&mdash;our treat.</h2>
<ul class="thirds grid">
  <li class="inset combo item reverse-color half grid">
    <div class="centered">
      <p class="loud">Limited time only: <span class="callout-text highlighted">Chimichurri</span> Roast beef sub</p>
      <img src="http://placehold.it/500x300" alt="Photo of item">
    </div>
    <dl class="item--info">
      <div class="standard--info">
        <dt class="item-name">Publix Deli Chimichurri Roast Beef Whole Sub</dt>
        <dd class="item-price">5<sup>99</sup></dd>
      </div>
      <div class="extra--info">
        <dd class="item-details">Chimichurri Roast Beef, Provolone Cheese, Spinach, Onion, Bell Peppers, Oregano, Oil, Vinegar, Mayonnaise, and Boar's Head&reg; Horseradish Sauce, each</dd>
        <dd class="highlighted loud">Save up to 1.00</dd>
      </div>
    </dl>
  </li>
  <li class="combo item half grid">
    <div class="">
      <p>An original dip</p>
      <p>This tasty dip is a Publix original and makes for great snacking.</p>
      <img src="http://placehold.it/500x300" alt="Photo of item" />
    </div>
    <div>
      <dl class="item--info">
        <div class="standard--info">
          <dt class="item-name">Publix Deli Greek Style Chicken Breast Dip</dt>
          <div class="item-price">
            <dd class="special">2 for</dd>
            <dd>6<sup>00</sup></dd>
          </div>
        </div>
        <div class="extra--info">
          <dd class="item-details">Or Buffalo, Delicious Dips Made with Chicken Breast, Neufchatel Cheese, Sour Crea,, and Seasonings, 16-oz pkg.</dd>
          <dd class="highlighted loud">Save up to 4.38 on 2</dd>
        </div>
      </dl>
      <dl class="item--info">
        <div class="standard--info">
          <dt class="item-name">GreenWise Crackers</dt>
          <div class="item-price">
            <dd class="special">2 for</dd>
            <dd>5<sup>00</sup></dd>
          </div>
        </div>
        <div class="extra--info">
          <dd class="item-details">Organic or Gluten Free, Assorted Varieties, 3.5 to 8.8-oz box</dd>
          <dd class="highlighted loud">Save up to .98 on 2</dd>
        </div>
      </dl>
    </div>
  </li>
  <li class="combo item half grid">
    <div>
      <p>Pass the yum</p>
      <p>Homemade garlic bread is perfect for an Italian feast.</p>
      <img src="http://placehold.it/500x300" alt="Photo of item" />
    </div>
    <div>
      <dl class="item--info">
        <div class="standard--info">
          <dt class="item-name">French Bread</dt>
          <dd class="item-price">1<sup>99</sup></dd>
        </div>
        <div class="extra--info">
          <dd class="item-details">Made From Scratch and Baked Fresh Throughout the Day, From the Publix Bakery, 12-oz pkg.</dd>
          <dd class="highlighted loud">Save up to .50</dd>
        </div>
      </dl>
      <dl class="item--info">
        <div class="standard--info">
          <dt class="item-name">Garlic Spread</dt>
          <dd class="item-price">1<sup>99</sup></dd>
        </div>
        <div class="extra--info">
          <dd class="item-details">Great When Making Garlic Bread or Add a Dash to Your Favorite Pasta Dish for Added Flavor, From the Publix Bakery, 8-oz pkg.</dd>
          <dd class="highlighted loud">Save up to .50</dd>
        </div>
      </dl>
    </div>
  </li>
  <li class="item">
    <img src="http://placehold.it/500x200" alt="Photo of item">
    <dl class="item--info">
      <div class="standard--info">
        <dt class="item-name">Publix Deli Cuban Sandwich</dt>
        <dd class="item-price">1<sup>50</sup> Off</dd>
      </div>
      <div class="extra--info">
        <dd class="item-details">Grab and Go, each</dd>
        <dd>With Each Purchase of One</dd>
      </div>
      <div class="standard--info">
        <dd class="item-name">Assorted Coca-Cola Products</dd>
      </div>
      <div class="extra--info">
        <dd class="item-details">20-oz bot.</dd>
        <dd class="highlighted loud">Save 1.50</dd>
      </div>
    </dl>
  </li>
  <li class="item">
    <img src="http://placehold.it/500x200" alt="Photo of item">
    <dl class="item--info">
      <div class="standard--info">
        <dt class="item-name">Publix Deli Honey Sriracha Rotisserie Chicken</dt>
        <dd class="item-price">6<sup>39</sup></dd>
      </div>
      <div class="extra--info">
        <dd class="item-details">Flavored With a Combination of Red Pepper, Sweet Chili Flakes, Onion, Garlic, Honey, and Pure Cane Sugar, each</dd>
        <dd class="highlighted loud">Save up to 1.20</dd>
      </div>
    </dl>
  </li>
  <li class="item">
    <img src="http://placehold.it/500x200" alt="Photo of item">
    <dl class="item--info">
      <div class="standard--info">
        <dt class="item-name">Boar's Head&reg; Bold Chef Salad</dt>
        <dd class="item-price">6<sup>99</sup></dd>
      </div>
      <div class="extra--info">
        <dd class="item-details">Boar's Head&reg; Ham, Turkey, Three Pepper Colby Jack Cheese, Lettuce, Pico de Gallo, Egg, Cucumbers, Olives, and Jalapeno Ranch Dressing, 16-oz pkg.</dd>
        <dd class="highlighted loud">Save up to 1.00</dd>
      </div>
    </dl>
  </li>
  <li class="item">
    <img src="http://placehold.it/500x200" alt="Photo of item">
    <dl class="item--info">
      <div class="standard--info">
        <dt class="item-name">Stacy's Pita Chips or Crisps</dt>
        <div class="item-price">
          <dd class="special">2 for</dd>
          <dd>5<sup>00</sup></dd>
        </div>
      </div>
      <div class="extra--info">
        <dd class="item-details">Or Bagel Chips, Assorted Varieties, 6.75 to 8-oz pkg.</dd>
        <dd class="highlighted loud">Save up to 1.98 on 2</dd>
        <dd class="item-details">(Assorted Sabra Hummus, 17-oz pkg. ... <strong>Buy One Get One Free of Equal or Lesser Price)</strong></dd>
      </div>
    </dl>
  </li>
  <li class="item">
    <img src="http://placehold.it/500x200" alt="Photo of item">
    <dl class="item--info">
      <div class="standard--info">
        <dt class="item-name">Boar's Head&reg; Top Round Roast Beef*</dt>
        <dd class="item-price">10<sup>99</sup><sub>lb</sub></dd>
      </div>
      <div class="extra--info">
        <dd class="item-details">Slow Roasted for Full Flavor, Sliced Fresh in the Publix Deli</dd>
        <dd class="highlighted loud">Save up to 1.30 lb</dd>
        <dd class="item-details">(Boar's Head&reg; Switzerland Swiss Cheese ... 9.99 lb</dd>
        <dd class="item-details"><strong>Publix Deli proudly features a full line of Boar's Head&reg; products</strong></dd>
      </div>
    </dl>
  </li>
  <li class="item">
    <img src="http://placehold.it/500x200" alt="Photo of item">
    <dl class="item--info">
      <div class="standard--info">
        <dt class="item-name">Belton Farm Red Fox Cheddar Cheese</dt>
        <dd class="item-price">12<sup>79</sup><sub>lb</sub></dd>
      </div>
      <div class="extra--info">
        <dd class="item-details">Located in the Publix Deli Specialty Cheese Section</dd>
        <dd class="highlighted loud">Save up to 2.70 lb</dd>
        <dd class="item-details">Wild California Crisps, Assorted Varieties, 5-oz pkg. ... 3.99</dd>
      </div>
    </dl>
  </li>
  <li class="item">
    <img src="http://placehold.it/500x200" alt="Photo of item">
    <dl class="item--info">
      <div class="standard--info">
        <dt class="item-name">Italian Five Grain Bread</dt>
        <dd class="item-price">2<sup>99</sup></dd>
      </div>
      <div class="extra--info">
        <dd class="item-details">Made From Scratch, With Oats, Cracked Wheat, Millet, Flaxseed, and Sunflower Seeds, From the Publix Bakery, 16-oz pkg.</dd>
        <dd class="highlighted loud">Save up to .70</dd>
      </div>
    </dl>
  </li>
  <li class="item">
    <img src="http://placehold.it/500x200" alt="Photo of item">
    <dl class="item--info">
      <div class="standard--info">
        <dt class="item-name">French Hamburger Buns, 8-Count</dt>
        <dd class="item-price">2<sup>99</sup></dd>
      </div>
      <div class="extra--info">
        <dd class="item-details">Made From Scratch by Skilled Bakers and Baked Fresh Daily, From the Publix Bakery, 16-oz pkg.</dd>
        <dd class="highlighted loud">Save up to .60</dd>
      </div>
    </dl>
  </li>
  <li class="item">
    <img src="http://placehold.it/500x200" alt="Photo of item">
    <dl class="item--info">
      <div class="standard--info">
        <dt class="item-name">Mini-Cookie Bites, 14-Count</dt>
        <dd class="item-price">3<sup>99</sup></dd>
      </div>
      <div class="extra--info">
        <dd class="item-details">Assorted Varieties, Bite-Size Treats, Many Flavors or a Mixed Package, From the Publix Bakery, 8-oz pkg.</dd>
        <dd class="highlighted loud">Save up to .30</dd>
      </div>
    </dl>
  </li>
  <li class="item">
    <img src="http://placehold.it/500x200" alt="Photo of item">
    <dl class="item--info">
      <div class="standard--info">
        <dt class="item-name">Creme Cakes</dt>
        <dd class="item-price">5<sup>99</sup></dd>
      </div>
      <div class="extra--info">
        <dd class="item-details">Assorted Flavors, Topped With Delicious Icing, Moist and Flavorful, From the Publix Bakery, 44-oz pkg.</dd>
        <dd class="highlighted loud">Save up to 1.30</dd>
      </div>
    </dl>
  </li>
  <li class="item">
    <img src="http://placehold.it/500x200" alt="Photo of item">
    <dl class="item--info">
      <div class="standard--info">
        <dt class="item-name">New York Style Cheesecake</dt>
        <dd class="item-price">9<sup>99</sup></dd>
      </div>
      <div class="extra--info">
        <dd class="item-details">With Fresh Starberries, Made With 100% Cream Cheese, From the Publix Bakery, 32-oz pkg. (Plain, 23-oz pkg. ... 7.99)</dd>
        <dd class="highlighted loud">Save up to 2.00</dd>
      </div>
    </dl>
  </li>
  <li class="item">
    <img src="http://placehold.it/500x200" alt="Photo of item">
    <dl class="item--info">
      <div class="standard--info">
        <dt class="item-name">Assorted Donut Holes</dt>
        <dd class="item-price">3<sup>49</sup></dd>
      </div>
      <div class="extra--info">
        <dd class="item-details">Or Cinnamon or Powdered Sugar, Great for Breakfast or Snack With a Glass of Cold Publix Milk, From the Publix Bakery, 8.28 to 8.64-oz pkg.</dd>
        <dd class="highlighted loud">Save up to .50</dd>
      </div>
    </dl>
  </li>
</ul>
              
            
!

CSS

              
                body {
  max-width: 84em;
  margin: auto;
  padding: 1rem;
  font-family: sans-serif;
}

/* Normalize */
ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}
img {
  display: block;
  max-width: 100%;
  height: auto;
}
dd { margin-left: 0; }

/* Grid items */
.item img {
  margin: auto;
}
.item > img,
.item--info {
  margin-bottom: 0.5rem;
}
.standard--info {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  /* Typography */
  font-size: 150%;
}
.standard--info > * {
  line-height: 1;
}
.item-name {
  flex: 1 1 0px;
  font-family: serif;
}
.item-price {
  display: flex;
  align-items: center;
  /* Typography */
  font-family: serif;
  font-size: 125%;
}
.swapped > .item-price {
  order: -1;
  flex-basis: 100%;
  justify-content: center;
  /* Typography */
  font-size: 300%;
}
.item-price sup,
.item-price sub	{
  /* Typography */
  font-size: 50%;
}
.item-price sup {
  align-self: flex-start;
}
.item-price sub {
  align-self: flex-end;
}

/* Item Modifiers */
.main-color {
  /* Color and decoration */
  background-color: #2f880f;
  color: #fff;
}
.inset {
  padding: 1rem;
  /* Color and decoration */
  background-color: #fff;
  border: 1px solid #000;
}
.minor.item {
  display: flex;
  align-items: flex-start;
}
.minor.item > dl {
  margin: 0;
  flex: auto;
}
.minor.item > img {
  flex-shrink: 0;
  margin-bottom: 0;
  margin-right: 0.5rem;
}
.centered {
  text-align: center;
}
.reverse-color {
  /* Color and decoration */
  background-color: #000;
  color: #FFF;
}
.highlighted {
  /* Color and decoration */
  color: #2f880f;
}
.reverse-color > .highlighted,
.reverse-color.highlighted,
.reverse-color .highlighted {
  color: lightgreen;
}
.special {
  width: 3em;
  height: 3em;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.2rem;
  margin-right: 0.5rem;
  /* Color and decoration */
  border: 2px solid #000;
  border-radius: 50%;
  /* Typography */
  text-align: center;
  text-transform: uppercase;
  font-family: sans-serif;
  font-size: 50%;
  font-weight: bold;
}
.swapped .special {
  font-size: 30%;
}
.loud {
  /* Typography */
  text-transform: uppercase;
  font-weight: bold;
}
.callout-text {
  display: block;
  /* Typography */
  font-size: 200%;
}
/* Alignment Modifiers */
.push-content {
  display: flex;
  align-items: flex-end;
}

/* Banners */
.divider {
  margin: 1rem 0 0.5rem 0;
  padding: 0.5rem;
}
.promo {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
}
.banner {
  /* Typography */
  text-transform: uppercase;
  font-size: 200%;
}

/* First breakpoint - 2-columns */
@media only screen and (min-width:40em) {
  .grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, 1fr);
    grid-gap: 1rem;
  }
  .half.grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .one-third,
  .two-thirds {
    grid-column: span 2;
  }
  .combo.item {
    grid-column: span 2;
  }
  .primary-item + dl {
    grid-row: 2;
  }
  .secondary-item + dl {
    grid-row: 1;
    grid-column: 2;
  }
  .recipe--header {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
  }
  .recipe--extras {
    grid-template-areas:
      "main   sidebar"
      "footer sidebar";
    grid-template-columns: 3fr 1fr;
  }
  .main {
    grid-area: main;
  }
  .sidebar {
    grid-area: sidebar;
  }
  .footer {
    grid-area: footer;
  }
  .callout-text {
    font-size: 300%;
  }
}

/* Second breakpoint - 3-columns */
@media only screen and (min-width:60em) {
  .combo.item {
    grid-column: span 1;
    display: block;
  }
  .thirds.grid {
    grid-template-columns: repeat(3, 1fr);
  }
  .one-third {
    grid-column: span 1;
  }
}

              
            
!

JS

              
                
              
            
!
999px

Console