JSFiddle - React, Tailwind, and code Playground

HTML

<main>

            <section class="our-properties">

                <h2><?= $lang->getW('h2_our-properties') ?></h2>


            </section>

            <section class="amenities">

                <h2><?= $lang->getW('h2_amenities') ?></h2>

                <article>
                    <figure class="left">
                        <h3><?= $lang->getW('h3_a_air') ?></h3>
                        <figcaption>
                            <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, rem</p>
                        </figcaption>
                    </figure>
                    <figure class="right">
                        <h3><?= $lang->getW('h3_a_security') ?></h3>
                        <figcaption>
                            <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, rem</p>
                        </figcaption>
                    </figure>
                    <figure class="left">
                        <h3><?= $lang->getW('h3_a_gym') ?></h3>
                        <figcaption>
                            <p><?= $lang->getW('p_a_gym') ?></p>
                        </figcaption>
                    </figure>
                    <figure class="right">
                        <h3><?= $lang->getW('h3_a_pool') ?></h3>
                        <figcaption>
                            <p><?= $lang->getW('p_a_pool') ?></p>
                        </figcaption>
                   ...

CSS

* {
    position: relative;
            box-sizing: border-box;
       -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    margin: 0;
    padding: 0;
}
*::before, *::after {
            box-sizing: border-box;
       -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}
body {
    background: #FFF;
    font-family: 'open Sans', sans-serif;
    font-size: 14px;
    color: #7e7c7d;
    overflow-x: hidden;
}
body a, button, input[type="submit"] {
            transition: 0.5s all;
         -o-transition: 0.5s all;
        -ms-transition: 0.5s all;
       -moz-transition: 0.5s all;
    -webkit-transition: 0.5s all;
    text-decoration: none
}
h1, h2, h3, h4, h5, h6 {
    position: relative;
    text-align: center;
    font-weight: normal;
    letter-spacing: 1px;
}
body a, body a:focus, section.about label, section.about label:focus { color: #337ab7 }
body a:hover, label:hover, input[type="submit"] {
    cursor: pointer;
    text-decoration: none
}
input,
button,
select,
textarea {
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
}
button, button:active, button:focus { outline: none; border: none }
main { background-color: #F5F5F5; text-align: center }
section > h2, section > article { width: 1170px; margin: 0 auto }
section > article { display: flex; flex-wrap: wrap }
section { padding: 4vw 0 3vw }
section > h2 { margin-bottom: 4vw; font-size: 1.7vw }
section > h2::before, section > h2::after {
    content: '';
    position: absolute;
    right: 0;
    bottom: -40%;
    left: 0;
    margin: auto;
    background-color: #8eb6d0
}
section > h2::before { width: 100%; height: 1px; opacity: 0.3 }
section > h2::after { height: 3px; bottom: -43% }
/* main > section.our-properties */
/*section.our-properties { background-image: url('') }*/
section.our-properties > h2::after { width: 18% }

/* main > section.amenities */
section.amenities > h2::after { width: 24%; bottom: -41% }
section.amenities > article > figure {
   ...