cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - ActiveLovehtmlicon-new-collectionicon-personicon-teamlog-outoctocatpop-outspinnerstartv

Pen Settings

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

You're using npm packages, so we've auto-selected Babel for you here, which we require to process imports and make it all work. If you need to use a different JavaScript preprocessor, remove the packages in the npm tab.

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

Use npm Packages

We can make npm packages available for you to use in your JavaScript. We use webpack to prepare them and make them available to import. We'll also process your JavaScript with Babel.

⚠️ This feature can only be used by logged in users.

Code Indentation

     

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.

            
              <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>
            
          
!
            
              $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;
  }
}
            
          
!
999px
🕑 One or more of the npm packages you are using needs to be built. You're the first person to ever need it! We're building it right now and your preview will start updating again when it's ready.
Loading ..................

Console