Pen Settings

HTML

About HTML Preprocessors

HTML preprocessors can make writing HTML more powerful or convenient. For instance, Markdown is designed to be easier to write and read for text documents and you could write a loop in Pug.

Learn more · Versions

Adding Classes

In CodePen, whatever you write in the HTML editor is what goes within the <body> tags in a basic HTML5 template. So you don't have access to higher-up elements like the <html> tag. If you want to add classes there that can affect the whole document, this is the place to do it.

About the <head>

In CodePen, whatever you write in the HTML editor is what goes within the <body> tags in a basic HTML5 template. If you need things in the <head> of the document, put that code here.

!
Insecure Resource

The resource you are linking to is using the 'http' protocol, which may not work when the browser is using https.

CSS

About CSS Preprocessors

CSS preprocessors help make authoring CSS easier. All of them offer things like variables and mixins to provide convenient abstractions.

Learn more · Versions

CSS Base

About CSS Base

It's a common practice to apply CSS to a page that styles elements such that they are consistent across all browsers. We offer two of the most popular choices: normalize.css and a reset. Or, choose Neither and nothing will be applied.

Vendor Prefixing

About Vendor Prefixing

To get the best cross-browser support, it is a common practice to apply vendor prefixes to CSS properties and values that require them to work. For instance -webkit- or -moz-.

We offer two popular choices: Autoprefixer (which processes your CSS server-side) and -prefix-free (which applies prefixes via a script, client-side).

Add External Stylesheets/Pens

Any URLs added here will be added as <link>s in order, and before the CSS in the editor. You can use the CSS from another Pen by using its URL and the proper URL extension.

Powered by Algolia
About External Resources

You can apply CSS to your Pen from any stylesheet on the web. Just put a URL to it here and we'll apply it, in the order you have them, before the CSS in the Pen itself.

You can also link to another Pen here (use the .css URL Extension) and we'll pull the CSS from that Pen and include it. If it's using a matching preprocessor, use the appropriate URL Extension and we'll combine the code before preprocessing, so you can use the linked Pen as a true dependency.

Learn more

+ add another resource

JavaScript

About JavaScript Preprocessors

JavaScript preprocessors can help make authoring JavaScript easier and more convenient.

Learn more · Versions

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.

Powered by Algolia
About External Resources

You can apply a script from anywhere on the web to your Pen. Just put a URL to it here and we'll add it, in the order you have them, before the JavaScript in the Pen itself.

If the script you link to has the file extension of a preprocessor, we'll attempt to process it before applying.

You can also link to another Pen here, and we'll pull the JavaScript from that Pen and include it. If it's using a matching preprocessor, we'll combine the code before preprocessing, so you can use the linked Pen as a true dependency.

Learn more

+ 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.

Powered by Algolia
About Packages

Using packages here is powered by esm.sh, which makes packages from npm not only available on a CDN, but prepares them for native JavaScript ESM usage.

All packages are different, so refer to their docs for how they work.

If you're using React / ReactDOM, make sure to turn on Babel for the JSX processing.

Behavior

Auto Save

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 class="pa3 pa4-ns pa5-l container">
	<div class="advert ad--railroad">
		<img class="wide-icon" src="
http://i64.tinypic.com/1zslyq.png
">
		<h4 class="din f7 ttu tracked pb2">catskill mtn. railroad</h4>
		<p class="f8 lh-copy pb3">Visit the website</p>
		<h4 class="din f7 ttu tracked pb2">empire state railway museum</h4>
		<p class="f8 lh-copy">Visit the website</p>
	</div>
	<div class="logo center pb4 tc">  
    <img class="w-70 w-50-bp1 w-40-bp3" src="http://i67.tinypic.com/25hjrqd.png"> 
  </div>
	<div class="atf bdb-bp1 pt2 pb3 flex justify-between">
		<div class="pb1">
			<h2 class="script f4 pt3">Come for the mountains</h2>
			<p class="green din tracked ttu f7 nt1">phoeniciadiner.com</p>
		</div>
		<div class="tr pb1">
			<h2 class="script f4 pt3">stay for the food!</h2>
			<p class="green din tracked ttu f7 nt1">845.688.9957</p>
		</div>
	</div>
  <div class="advert ad--trout">
		<img class="wide-icon" src="http://i66.tinypic.com/os4itk.png">
		<h4 class="din f7 ttu tracked pb2">TROUT FISHING IN ESOPUS CREEK</h4>
		<p class="f8 lh-copy">Visit the website</p>
    </div>
	<div class="breakfast--header pb3 bdt bdb bdn-bp3 mb3">
		<aside class="script f3 f4-l dn db-bp2 pt4">
			House-made<br>
			Jams & Bread
		</aside>
		<div class="breakfast--type">
			<h2 class="cubano f2 tracked green pt3 pb2 tc">Breakfast</h2>
			<p class="din ttu tracked tc f6-l">Served all day</p>
		</div>
	</div>
	<div class="items--container breakfast--container">
		<ul>
			<li class="pb3 pt1 measure">
				<h3 class="din ttu tracked f6">Biscuits & Gravy <span class="price fw4 baskerville">(8)</span></h3>
				<p class="item-description">house made sausage gravy, sunny side up egg and phoenician potatoes</p>
			</li>
			<li class="pb3 pt1 measure">
				<h3 class="din ttu tracked f6">HOUSE MADE WAFFLE <span class="price fw4 baskerville">(8)</span></h3>
				<p class="item-description">fresh fruit and local maple syrup</p>
			</li>
			<li class="pb3 pt1 measure">
				<h3 class="din ttu tracked f6">BUCKWHEAT OR BUTTERMILK SILVER DOLLAR PANCAKES <span class="price fw4 baskerville">(8)</span></h3>
				<p class="item-description">fresh fruit and local maple syrup</p>
			</li>
			<li class="pb3 pt1 measure">
				<h3 class="din ttu tracked f6">french toast <span class="price fw4 baskerville">(8)</span></h3>
				<p class="item-description">fresh fruit and local maple syrup</p>
			</li>
			<li class="pb3 pt1 measure">
				<h3 class="din ttu tracked f6">HOUSE MADE GRANOLA <span class="price fw4 baskerville">(8)</span></h3>
				<p class="item-description">fruit and yogurt</p>
			</li>
			<li class="pb3 pt1 measure">
				<h3 class="din ttu tracked f6">BREAKFAST TACOS <span class="price fw4 baskerville">(8)</span></h3>
				<p class="item-description">3 corn tortillas, eggs, cheddar, chorizo, salsa verde and queso fresco</p>
			</li>
			<li class="pb3 pt1 measure">
				<h3 class="din ttu tracked f6">BREAKFAST BURRITO <span class="price fw4 baskerville">(9)</span></h3>
				<p class="item-description">scrambled eggs, cheddar, chorizo, black beans, flour tortilla and spicy green salsa on the side</p>
			</li>
			<li class="pb3 pt1 measure">
				<h3 class="din ttu tracked f6">LOCALLY SMOKED TROUT <span class="price fw4 baskerville">(9)</span></h3>
				<p class="item-description">herbed cream cheese, red onion, capers on a bagel</p>
			</li>
			<li class="pb3 pt1 measure">
				<h3 class="din ttu tracked f6">BACON, EGG & CHEESE ON BISCUIT <span class="price fw4 baskerville">(8)</span></h3>
				<p class="item-description">phoenician potatoes</p>
				<p class="item-description i">*served with phoenician potatoes, & toast</p>
			</li>
			<li class="pb3 pt1 measure">
				<h3 class="din ttu tracked f6">FULL PHOENICIA BREAKFAST* <span class="price fw4 baskerville">(12)</span></h3>
				<p class="item-description">two eggs any way, sausage and bacon, baked beans, tomatoes</p>
			</li>
			<li class="pb3 pt1 measure">
				<h3 class="din ttu tracked f6">eggs any way* <span class="price fw4 baskerville">(8)</span></h3>
				<p class="item-description">bacon or sausage</p>
			</li>
			<li class="pb3 pt1 measure">
				<h3 class="din ttu tracked f6">phoenicia diner omelet* <span class="price fw4 baskerville">(9)</span></h3>
				<p class="item-description">sautéed greens, mushrooms, goat cheese</p>
			</li>
			<li class="pb3 pt1 measure">
				<h3 class="din ttu tracked f6">omelet your way* <span class="price fw4 baskerville">(9)</span></h3>
				<p class="item-description i">choose up to 3 items</p>
				<p class="item-description">swiss, cheddar, feta, spinach, tomato, onion, peppers, bacon, sausage, mushrooms, or ham</p>
				<p class="item-description i">each additional item (2)</p>
			</li>
			<li class="pb3 pt1 measure">
				<h3 class="din ttu tracked f6">western omelet* <span class="price fw4 baskerville">(9)</span></h3>
				<p class="item-description">ham, peppers and onions</p>
			</li>
			<li class="pb3 pt1 measure">
				<h3 class="din ttu tracked f6">the benedicts* <span class="price fw4 baskerville">(9)</span></h3>
				<p class="item-description">served with phoenician potatoes</p>
				<p class="item-description i">california (9) canadian bacon (9) florentine (8) locally smoked salmon (10)</p>
			</li>
		</ul>
		<h3 class="cubano f3 tracked green pt2 pb3">Skillets</h3>
		<ul>
			<li class="pb3 pt1 measure">
				<h3 class="din ttu tracked f6">HUEVOS RANCHEROS SKILLET <span class="price fw4 baskerville">(9)</span></h3>
				<p class="item-description">refried beans, corn tortilla, salsa verde, cheddar cheese and two sunny side up eggs</p>
				<p class="item-description i">*served with toast</p>
			</li>
			<li class="pb3 pt1 measure">
				<h3 class="din ttu tracked f6">DUCK AND GRITS SKILLET* <span class="price fw4 baskerville">(11)</span></h3>
				<p class="item-description">duck confit, shiitake mushrooms, cheddar cheese grits and poached egg</p>
			</li>
			<li class="pb3 pt1 measure">
				<h3 class="din ttu tracked f6">WILD HIVE FARM POLENTA* <span class="price fw4 baskerville">(9)</span></h3>
				<p class="item-description">sautéed greens and two sunny side up eggs</p>
			</li>
			<li class="pb3 pt1 measure">
				<h3 class="din ttu tracked f6">FARMER’S SKILLET* <span class="price fw4 baskerville">(10)</span></h3>
				<p class="item-description">bacon, phoenician potatoes, cheese and two sunny side up eggs</p>
			</li>
			<li class="pb3 pt1 measure">
				<h3 class="din ttu tracked f6">HOUSE CURED CORNED BEEF HASH* <span class="price fw4 baskerville">(11)</span></h3>
				<p class="item-description">grass fed beef, onion, peppers, potatoes and two sunny side up eggs</p>
			</li>
			<li class="pb3 pt1 measure">
				<h3 class="din ttu tracked f6">ARNOLD BENNETT SKILLET* <span class="price fw4 baskerville">(10)</span></h3>
				<p class="item-description">locally smoked trout, parmesan cheese, crème fraîche scrambled eggs</p>
			</li>
		</ul>
	</div>
	<div class="lunch--header pt3 pb3 bdb mb3">
    <div></div>
		<div>
			<h2 class="cubano f2 tracked green pb2 tc">lunch</h2>
			<p class="din ttu tracked tc f6-l">SERVED FROM 11AM-5PM</p>
		</div>
		<aside class="script f3 f4-l dn db-bp2 pt3 tr">
			We serve Mimosas,<br>
			Bloody Marys, & Beer
		</aside>
	</div>
	<div class="items--container lunch--container">
		<h3 class="cubano f3 tracked green pt2">Sandwiches</h3>
		<p class="item-description i pt2 pb3">served with house fries or mixed greens</p>
		<ul class="">
			<li class="pb3 pt1 measure">
				<h3 class="din ttu tracked f6">Classic BLT <span class="price fw4 baskerville">(8)</span></h3>
			</li>
			<li class="pb3 pt1 measure">
				<h3 class="din ttu tracked f6">"The Mitchell" <span class="price fw4 baskerville">(8)</span></h3>
				<p class="item-description">pole caught tuna, lettuce and tomato</p>
			</li>
			<li class="pb3 pt1 measure">
				<h3 class="din ttu tracked f6">GRASS FED ROAST BEEF SANDWICH <span class="price fw4 baskerville">(11)</span></h3>
				<p class="item-description">cheddar, caramelized onions, watercress, house made horseradish mayo on ciabatta</p>
			</li>
			<li class="pb3 pt1 measure">
				<h3 class="din ttu tracked f6">CBLT <span class="price fw4 baskerville">(12)</span></h3>
				<p class="item-description">fried crab cake, bacon, lettuce & tomato on our brioche roll</p>
			</li>
			<li class="pb3 pt1 measure">
				<h3 class="din ttu tracked f6">CLASSIC TURKEY CLUB <span class="price fw4 baskerville">(12)</span></h3>
				<p class="item-description">house roasted turkey, bacon, lettuce and tomato</p>
			</li>
			<li class="pb3 pt1 measure">
				<h3 class="din ttu tracked f6">HOUSE MADE REUBEN <span class="price fw4 baskerville">(12)</span></h3>
				<p class="item-description">house cured corned beef</p>
			</li>
			<li class="pb3 pt1 measure">
				<h3 class="din ttu tracked f6">VEGGIE QUESADILLA <span class="price fw4 baskerville">(9)</span></h3>
				<p class="item-description">grilled portabella, zucchini, roasted peppers, red onion, fresh spinach, cheddar, pico de gallo and guacamole</p>
			</li>
			<li class="pb3 pt1 measure">
				<h3 class="din ttu tracked f6">FRIED CHICKEN & WAFFLE SANDWICH <span class="price fw4 baskerville">(12)</span></h3>
				<p class="item-description">free range chicken breast, house made waffle, pickled veggies, sriracha mayo</p>
			</li>
			<li class="pb3 pt1 measure">
				<h3 class="din ttu tracked f6">GRASS FED BURGER <span class="price fw4 baskerville">(11)</span></h3>
				<p class="item-description">lettuce and tomato</p>
				<p class="item-description i">add cheese (1) bacon (2)</p>
			</li>
			<li class="pb3 pt1 measure">
				<h3 class="din ttu tracked f6">GRILLED CHEDDAR & TOMATO * <span class="price fw4 baskerville">(7)</span></h3>
			</li>
			<li class="pb3 pt1 measure">
				<h3 class="din ttu tracked f6">HOUSE MADE VEGGIE BURGER <span class="price fw4 baskerville">(9)</span></h3>
				<p class="item-description">wild rice, sweet potato, eggplant, black lentils, red onion <span class="i">add cheese <span class="fs-normal">(2)</span></span></p>
			</li>
		</ul>
		<h3 class="cubano f3 tracked green pt2 pb3">Soups</h3>
		<ul>
			<li class="pb3 pt1 measure">
				<h3 class="din ttu tracked f6">TORTILLA SOUP <span class="price fw4 baskerville ttn"><span class="i">bowl</span> (7) <span class="i">cup</span> (4)</span></h3>
				<p class="item-description">free range chicken, avocado, tortilla chips</p>
			</li>
			<li class="pb3 pt1 measure">
				<h3 class="din ttu tracked f6">TODAY'S VEGGIE SOUP* <span class="price fw4 baskerville ttn"><span class="i">bowl</span> (6) <span class="i">cup</span> (3.5)</span></h3>
			</li>
		</ul>
		<h3 class="cubano f3 tracked green pt2 pb3">Salad</h3>
		<ul>
			<li class="pb3 pt1 measure">
				<h3 class="din ttu tracked f6">house salad <span class="price fw4 baskerville">(10)</span></h3><span class="price fw4 baskerville"></span>
				<p class="item-description"><span class="price fw4 baskerville">baby kale, pickled onion, fresh pears, pumpkin seed crusted goat cheese, lemon vinaigrette</span></p>
			</li>
			<li class="pb3 pt1 measure">
				<span class="price fw4 baskerville"></span>
				<h3 class="din ttu tracked f6">SMOKED SALMON NIÇOISE SALAD <span class="price fw4 baskerville ttn">(12)</span></h3>
				<p class="item-description">hookline smoked salmon, hardboiled eggs, tomatoes, olives, anchovies, green beans with lemon vinaigrette</p>
			</li>
			<li class="pb3 pt1 measure">
				<h3 class="din ttu tracked f6">QUINOA SALAD <span class="price fw4 baskerville ttn">(8)</span></h3>
				<p class="item-description">mixed greens, cucumber, carrot, red onion, avocado and lemon vinaigrette</p>
				<p class="item-description i">add seared local chicken breast <span class="fs-normal">(4)</span></p>
			</li>
		</ul>
		<h3 class="cubano f3 tracked green pt2 pb3">platters</h3>
		<ul>
			<li class="pb3 pt1 measure">
				<h3 class="din ttu tracked f6">meatloaf <span class="price fw4 baskerville">(13)</span></h3><span class="price fw4 baskerville"></span>
				<p class="item-description"><span class="price fw4 baskerville">mashed potatoes and marinara, sautéed greens</span></p>
			</li>
			<li class="pb3 pt1 measure">
				<h3 class="din ttu tracked f6">CHICKEN & SAUSAGE GUMBO <span class="price fw4 baskerville ttn">(12)</span></h3>
				<p class="item-description">free range chicken, andouille sausage and basmati rice</p>
			</li>
			<li class="pb3 pt1 measure">
				<h3 class="din ttu tracked f6">GRASS FED BEEF SHORT RIBS & POLENTA <span class="price fw4 baskerville ttn">(14)</span></h3>
				<p class="item-description">braised ribs, wild hive farm polenta, seasonal veggies</p>
			</li>
		</ul>
		<div class="providers tc pv3 bdb bdt bdr bdl mt3">
			<h3 class="script f3 mb0 pt3">Check out our</h3>
			<h3 class="cubano f3 tracked green pb3 nt1">Local providers</h3>
			<h3 class="script f3">above the counter</h3>
		</div>
	</div>
	<div class="items--container sides">
    <h2 class="script f2 green tc pt5 pt2-bp3">Sides</h2>
		<ul class="sides--container">
			<li class="pb3 measure">
				<p class="item-description dib">bowl of steel cut oatmeal with fruit</p>
				<p class="item-description dib">(5)</p>
			</li>
			<li class="pb3 measure">
				<p class="item-description dib">phoenician potatoes</p>
				<p class="item-description dib">(3)</p>
			</li>
			<li class="pb3 measure">
				<p class="item-description dib">bacon</p>
				<p class="item-description dib">(4)</p>
			</li>
			<li class="pb3 measure">
				<p class="item-description dib">house made pork or turkey sausage patty</p>
				<p class="item-description dib">(4)</p>
			</li>
			<li class="pb3 measure">
				<p class="item-description dib">cheddar grits</p>
				<p class="item-description dib">(3)</p>
			</li>
			<li class="pb3 measure">
				<p class="item-description dib">arugula salad with lemon vinaigrette</p>
				<p class="item-description dib">(5)</p>
			</li>
			<li class="pb3 measure">
				<p class="item-description dib">seasonal vegetables</p>
				<p class="item-description dib">(4)</p>
			</li>
			<li class="pb3 measure">
				<p class="item-description dib">fresh fruit</p>
				<p class="item-description dib">(5)</p>
			</li>
			<li class="pb3 measure">
				<p class="item-description dib">beer battered onion rings</p>
				<p class="item-description dib">(5)</p>
			</li>
			<li class="pb3 measure">
				<p class="item-description dib">house cut fries</p>
				<p class="item-description dib">(5)</p>
			</li>
			<li class="pb3 measure">
				<p class="item-description dib">maple syrup</p>
				<p class="item-description dib">(1.5)</p>
			</li>
			<li class="pb3 measure">
				<p class="item-description dib">mac & cheese</p>
				<p class="item-description dib">(4)</p>
			</li>
		</ul>
	</div>
  <div class="bottom">
	<div class="advert ad--lodging">
		<img class="square-icon" src="http://i63.tinypic.com/2v982ur.png">
		<h4 class="din f7 ttu tracked pb2">phoenicia lodging</h4>
		<p class="f8">Visit the website</p>
	</div>
	<div class="advert ad--graham">
		<img class="square-icon" src="http://i68.tinypic.com/2s8k3us.png">
		<h4 class="din f7 ttu tracked pb2">THE GRAHAM & CO. HOTEL</h4>
		<p class="f8">Visit the website</p>
	</div>
	<div class="advert ad--voice">
		<img class="square-icon" src="http://i66.tinypic.com/257g6j4.png">
		<h4 class="din f7 ttu tracked pb2">THE PHOENICIA INTERNATIONAL festival of the voice</h4>
		<p class="f8">Visit the website</p>
	</div>
	<div class="advert ad--trail">
		<h4 class="din f7 ttu tracked pb2">GIANT LEDGE / PANTHER MOUNTAIN TRAIL</h4>
		<p class="f8 lh-copy">Easy to moderate climb with panoramic views. 5 miles round trip. Take Rt. 28 west to Big Indian then left onto Rt 47. Go approximately 7.5 miles on Rt 47. the trail head parking lot is on the RIGHT side of the road, just before a sharp turn going uphill.</p>
		<p class="f8 lh-copy">Visit the website</p>
	</div>
	<div class="advert ad--kayak">
		<img class="wide-icon pv2" src="http://i66.tinypic.com/ht8c5v.png">
		<h4 class="din f7 ttu tracked pb2">Kayaking & canoeing</h4>
		<p class="f8">Visit the website</p>
	</div>
	</div>
</body>
!

CSS 

              
                $beige: rgb(255, 255, 249);
$green: rgb(60, 136, 121);
$brown: rgb(95, 90, 68);
$baskerville: "libre baskerville", georgia, serif;
$din: "din-2014", sans-serif;
$cubano: "cubano", sans-serif;
$script: "funkydori", sans-serif;

body {
  font-family: $baskerville;
  background-color: $beige;
  color: $brown;
}

.logo {
  background-color: $beige;
  z-index: 3;
  // margin: 0 16px;
}

.din {
  font-family: $din;
}
.cubano {
  font-family: $cubano;
}

.script {
  font-family: $script;
}

.baskerville {
  font-family: $baskerville;
}

.green {
  color: $green;
}

.price,
.item-description {
  font-family: $baskerville;
  letter-spacing: 0.6px;
  line-height: 1.4;
  padding-bottom: 4px;
  font-size: 12px;
}

img {
  mix-blend-mode: multiply;
}

.advert {
  display: none;
}


.bdb {
  border-bottom: 2px dotted $brown;
}

.bdt {
  border-top: 2px dotted $brown;
}

.bdr {
  border-right: 2px dotted $brown;
}

.bdl {
  border-left: 2px dotted $brown;
}

.square-icon {
  height: 50px;
}

.wide-icon {
  width: 75px;
}

.f8 {
  font-size: 11px;
  letter-spacing: 0.3px;
}

 .sides--container {
    column-count: 2;
    column-gap: 32px;
  }

@media (min-width: 600px) {
  
  .bdb-bp1 {
  border-bottom: 2px dotted $brown;
}
  
  .container {
    display: grid;
    grid-template-areas: 
      "header header header"
      "b--header b--header b--header"
      "breakfast breakfast breakfast"
      "l--header l--header l--header"
      "lunch lunch lunch"
      "sides sides sides"
  }
  
  .atf {
    grid-area: header;
    align-self: start;
    padding-bottom: 90px;
    z-index: 0;
  }
  
  .logo {
    grid-area: header;
    // z-index: 3;
  }
  
  .breakfast--container,
  .lunch--container {
    column-count: 2;
    column-gap: 32px;
  }
  
  .breakfast--header {
    grid-area: b--header;
  }
  
  .breakfast--container {
    grid-area: breakfast;
  }
  
  .lunch--header {
    grid-area: l--header;
  }
  
  .lunch--container {
    grid-area: lunch;
  }
  
  .sides {
    grid-area: sides;
  }
  
  .w-50-bp1 {
    width: 50%;
  }
  .w-100-bp1 {
    width: 100%;
  }
  
}

@media (min-width: 800px) {
  
  .db-bp2 {
    display: block;
  }
  
  .breakfast--header {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
  }
  
  .lunch--header {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
  }
  
  .sides--container {
    column-count: 3;
  }
}

@media (min-width: 1100px) {
  
  .container {
    grid-template-areas: 
      "top--left top--left header header header header header top--right top--right"
      "b--header b--header b--header b--header . l--header l--header l--header l--header"
      "breakfast breakfast breakfast breakfast sides lunch lunch lunch lunch"
      "bottom bottom bottom bottom bottom bottom bottom bottom bottom";
  }
  
  .bottom {
    grid-area: bottom;
    display: flex;
    padding-top: 24px;
    border-top: 2px dotted $brown;
    margin-top: 16px;
  }
  
  .advert {
    display: block;
    text-align: center;
  }
  
  .advert img {
    padding-bottom: 16px;
  }
  
  .ad--railroad {
    grid-area: top--left;
    border-bottom: 2px dotted $brown;
    border-right: 2px dotted $brown;
    padding-right: 16px;
    margin-right: 16px;
    height: 150px;
  }
  
  .ad--trout {
    grid-area: top--right;
    border-bottom: 2px dotted $brown;
    border-left: 2px dotted $brown;
    height: 150px;
    padding-left: 16px;
    margin-left: 16px;
  }
  
  .ad--lodging {
    border-right: 2px dotted $brown;
    border-left: 2px dotted $brown;
    padding: 0 16px;
    width: 16.666%;
  }
  
  .ad--graham {
    border-right: 2px dotted $brown;
    padding: 0 16px;
    width: 16.666%;
  }
  
  .ad--voice {

    border-right: 2px dotted $brown;
    padding: 0 16px;
    width: 16.666%;
  
  }
  
  .ad--trail {

    border-right: 2px dotted $brown;
    padding: 0 16px;
    width: 30%;
  
  }
  
  .ad--kayak {
    width: 20%;
    border-right: 2px dotted $brown;
  }
  
  .sides--container {
    column-count: 1;
    column-gap: 0;
    text-align: center;   
  }
  
  .sides {
    padding: 0 16px;
    margin: 0 16px;
    border-left: 2px dotted $brown;
    border-right: 2px dotted $brown;
    align-self: stretch;
  }

  .bdn-bp3 {
    border-top: 0;
  }
  .pt2-bp3 {
    padding-top: 16px;
  }
  
  .logo {
    margin-bottom: -100px;
    width: 50%;
  }
  
  .atf {
    height: 150px;
    align-items: center;
    padding: 0 32px 40px 32px;
  }
  
  .wide-icon {
    max-height: 50px;
    width: 150px;
  }
  
  .w-40-bp3 {
    width: 90%;
  }
  
  .sides li {
    padding: 16px 0;
  }
}
!

JS
!
999px

Console