<div class="container">

  <div class="pricing-table">

    <div class="pricing-table-header">

      <h1>Standard</h1>

    </div> <!-- end pricing-table-header -->

    <div class="pricing-table-content">

      <ul>

        <li><strong>10GB</strong> Disk Space</li>

        <li><strong>5</strong> Email Addresses</li>

        <li><strong>3</strong> Subdomains</li>

        <li><strong>1</strong> MySQL Databases</li>

      </ul>

    </div> <!-- end pricing-table-content -->

    <div class="pricing-table-footer">

      <h2><sup>$</sup>9.99</h2>

      <p>per month</p>

      <a href="#">Sign Up</a>

    </div> <!-- end pricing-table-footer -->

  </div> <!-- end pricing-table -->

  <div class="pricing-table featured">

    <div class="pricing-table-header">

      <h1>Professional</h1>

    </div> <!-- end pricing-table-header -->

    <div class="pricing-table-content">

      <ul>

        <li><strong>50GB</strong> Disk Space</li>

        <li><strong>20</strong> Email Addresses</li>

        <li><strong>10</strong> Subdomains</li>

        <li><strong>30</strong> MySQL Databases</li>

      </ul>

    </div> <!-- end pricing-table-content -->

    <div class="pricing-table-footer">

      <h2><sup>$</sup>19.99</h2>

      <p>per month</p>

      <a href="#">Sign Up</a>

    </div> <!-- end pricing-table-footer -->

  </div> <!-- end pricing-table featured -->

  <div class="pricing-table">

    <div class="pricing-table-header">

      <h1>Ultimate</h1>

    </div> <!-- end pricing-table-header -->

    <div class="pricing-table-content">

      <ul>

        <li><strong>75GB</strong> Disk Space</li>

        <li><strong>50</strong> Email Addresses</li>

        <li><strong>20</strong> Subdomains</li>

        <li><strong>50</strong> MySQL Databases</li>

      </ul>

    </div> <!-- end pricing-table-content -->

    <div class="pricing-table-footer">

      <h2><sup>$</sup>29.99</h2>

      <p>per month</p>

      <a href="#">Sign Up</a>

    </div> <!-- end pricing-table-footer -->

  </div> <!-- end pricing-table -->

</div> <!-- end container -->

@use postcss-preset-env {
  stage: 0;
}
/* CSS Document */

/* ---------- ERIC MEYER'S RESET CSS ---------- */
/* ---------- https://meyerweb.com/eric/tools/css/reset/ ---------- */

@import url(https://meyerweb.com/eric/tools/css/reset/reset.css);

/* ---------- GENERAL ---------- */

body {
	background-color: #32363c;	
	color: #5f6062;
  display: grid;
	font-family: Arial, Helvetica, sans-serif;
  min-block-size: 100vh;
  place-items: center;
}

a { text-decoration: none; }

/* ---------- PRICING TABLE ---------- */

.container {
  margin-inline: auto;
  inline-size: 90%;
	max-inline-size: 960px;
}

.pricing-table {
	box-shadow: 0px 0px 3px #26292e;
	display: inline-block;
	margin: 30px 10px;
	width: 250px;
}

.featured {
	transform: scale(1.1, 1.1);		
}

.pricing-table-header {
	background: linear-gradient(to bottom,  #65707f 0%,#4a5564 100%);
	background-color: #586272;
	border-radius: 5px 5px 0px 0px;
	padding: 16px;
	text-align: center;	
}

.pricing-table-header h1 {
	color: #fff;
	font-size: 14px;
	text-transform: uppercase;
}

.pricing-table-content {
	background-color: #fff;
}

.pricing-table-content ul {
	list-style: none;	
}

.pricing-table-content ul li {
	border-bottom: 1px solid #efeff0;
	font-size: 14px;
	padding: 16px 56px;
}

.pricing-table-footer {
	background-color: #f5f7f8;
	border-radius: 0px 0px 5px 5px;
	padding: 16px 0;
}


.pricing-table-footer {
	text-align: center;	
}

.pricing-table-footer p {
	font-size: 12px;
	text-transform: uppercase;	
}

.pricing-table-footer a {
	background: linear-gradient(to bottom,  #50b7e4 0%,#3098c4 100%);
	background-color: #3ea6d2;
	border: 1px solid #1481b0;
	border-radius: 5px;
	color: #fff;
	display: inline-block;
	font-weight: bold;
	margin-top: 10px;
	padding: 10px;
}