<!-- a0028 -------------------------------------->
<?php if (have_rows('a0028')) : ?>
    <div class="container">
        <div class="row">
            <div class="col-12 A0028-grid">
                <?php while (have_rows('a0028')) : the_row(); ?>
                    <div class="columns-table">
                        <ul class="price">
                            <li class="header" <?php if (get_sub_field('main')=="Yes") echo 'style="background-color:#04AA6D"'?> ><?php echo get_sub_field('header'); ?></li>
                            <li class="grey-color"><?php echo get_sub_field('price'); ?></li>
                            <?php while (have_rows('params')) : the_row(); ?>
                            <li><?php echo get_sub_field('param'); ?></li>
                            <?php endwhile; ?>
                            <li class="grey-color"><a href="<?php echo get_sub_field('button_url'); ?>" class="A0028-button-link"><?php echo get_sub_field('button_text'); ?></a></li>
                        </ul>
                    </div>
                <?php endwhile; ?>
            </div>
        </div>
    </div>
<?php endif; ?>
<!-- a0028 End ----------------------------------->

/*-- a0028 --------------------------------------*/
.columns-table {
    float: left;
    width: 100%;
    padding: 8px;
}

.price {
    list-style-type: none;
    border: 1px solid #eee;
    margin: 0;
    padding: 0;
    -webkit-transition: 0.3s;
    transition: 0.3s;
}

.price:hover {
    box-shadow: 0 8px 12px 0 rgba(0, 0, 0, 0.2)
}

.price .header {
    background-color: #111;
    color: white;
    font-size: 25px;
}

.price li {
    border-bottom: 1px solid #eee;
    padding: 20px;
    text-align: center;
}

.price .grey-color {
    background-color: #eee;
    font-size: 20px;
}

.A0028-button-link {
    background-color: #04AA6D;
    border: none;
    color: white !important;
    padding: 10px 25px;
    text-align: center;
    text-decoration: none;
    font-size: 18px;
}

.A0028-grid{
	display: grid;
    grid-template-columns: 1fr 1fr 1fr;
}

@media only screen and (max-width: 1000px) {
.A0028-grid{
    grid-template-columns: 1fr 1fr;
}
}

@media only screen and (max-width: 768px) {
.A0028-grid{
    grid-template-columns: 1fr;
}
}

@media only screen and (max-width: 600px) {
    .columns {
        width: 100%;
    }
}

/*-- a0028 END --------------------------------------*/

<!-- a0028 -------------------------------------->
<div class="container">
    <div class="row">
        <div class="col-12 A0028-grid">

            <div class="columns-table">
                <ul class="price">
                    <li class="header">Basic</li>
                    <li class="grey-color">$ 9.99 / year</li>
                    <li>10GB Storage</li>
                    <li>10 Emails</li>
                    <li>10 Domains</li>
                    <li>1GB Bandwidth</li>
                    <li class="grey-color"><a href="#" class="A0028-button-link">Sign Up</a></li>
                </ul>
            </div>

            <div class="columns-table">
                <ul class="price">
                    <li class="header" style="background-color:#04AA6D">Pro</li>
                    <li class="grey-color">$ 24.99 / year</li>
                    <li>25GB Storage</li>
                    <li>25 Emails</li>
                    <li>25 Domains</li>
                    <li>2GB Bandwidth</li>
                    <li class="grey-color"><a href="#" class="A0028-button-link">Sign Up</a></li>
                </ul>
            </div>

            <div class="columns-table">
                <ul class="price">
                    <li class="header">Premium</li>
                    <li class="grey-color">$ 49.99 / year</li>
                    <li>50GB Storage</li>
                    <li>50 Emails</li>
                    <li>50 Domains</li>
                    <li>5GB Bandwidth</li>
                    <li class="grey-color"><a href="#" class="A0028-button-link">Sign Up</a></li>
                </ul>
            </div>
        </div>
    </div>
</div>
<!-- a0028 End ----------------------------------->

/*-- a0028 --------------------------------------*/
.columns-table {
    float: left;
    width: 100%;
    padding: 8px;
}

.price {
    list-style-type: none;
    border: 1px solid #eee;
    margin: 0;
    padding: 0;
    -webkit-transition: 0.3s;
    transition: 0.3s;
}

.price:hover {
    box-shadow: 0 8px 12px 0 rgba(0, 0, 0, 0.2)
}

.price .header {
    background-color: #111;
    color: white;
    font-size: 25px;
}

.price li {
    border-bottom: 1px solid #eee;
    padding: 20px;
    text-align: center;
}

.price .grey-color {
    background-color: #eee;
    font-size: 20px;
}

.A0028-button-link {
    background-color: #04AA6D;
    border: none;
    color: white !important;
    padding: 10px 25px;
    text-align: center;
    text-decoration: none;
    font-size: 18px;
}

.A0028-grid{
	display: grid;
    grid-template-columns: 1fr 1fr 1fr;
}

@media only screen and (max-width: 1000px) {
.A0028-grid{
    grid-template-columns: 1fr 1fr;
}
}

@media only screen and (max-width: 768px) {
.A0028-grid{
    grid-template-columns: 1fr;
}
}

@media only screen and (max-width: 600px) {
    .columns {
        width: 100%;
    }
}

/*-- a0028 END --------------------------------------*/