<div id="container">
    <h1>Responsive Column List of Reviews</h1>
    <a href="https://wpcoder.pro/?utm_source=codepen&utm_medium=item-content&utm_campaign=upgrade-to-pro"
       target="_blank">Easily embed Pen in your WordPress site using WPCoder!</a>
</div>

    <ul class="list__review">
        <li class="review__item">
            <h4 class="review__heading">
                <span class="review__title">Very cool product. Simple and customizable...</span>
                <span class="review__stars">⭐️⭐️⭐️⭐️⭐️</span>
            </h4>
            <p class="review__content">Very cool product. Simple and customizable plugin that adds some nice
                functionality
                to your site. Good support too, I found a bug they fixed right away.</p>
            <p class="review__author">Max Power</p>
        </li>

        <li class="review__item">
            <h4 class="review__heading">
                <span class="review__title">A good plugin!</span>
                <span class="review__stars">⭐️⭐️⭐️⭐️⭐️</span>
            </h4>
            <p class="review__content">A good plugin! Support quickly answered my question, attaching a screenshot of
                the
                settings. Thank’s!</p>
            <p class="review__author">Luna Eclipse</p>
        </li>

        <li class="review__item">
            <h4 class="review__heading">
                <span class="review__title">Very good plugin</span>
                <span class="review__stars">⭐️⭐️⭐️⭐️⭐️</span>
            </h4>
            <p class="review__content">The Float Menu Pro is the best plugin I came across. It is flexible, beautifully
                designed and it does what it says. Keep the good work WOW-Company.</p>
            <p class="review__author">Jax Maverick</p>
        </li>

        <li class="review__item">
            <h4 class="review__heading">
                <span class="review__title">Nice menu!</span>
                <span class="review__stars">⭐️⭐️⭐️⭐️⭐️</span>
            </h4>
            <p class="review__content">As a designer many times I found a headache trying to change menus in frameworks
                that
                really fit themes. Now with all this Menus I’ve tons of possibilities for my/client projects! The best
                is I
                can combine many plugins! so this make all have same look and feel. Great job again, so KUDOS!
                <br>PS. Really the support Rocks! </p>
            <p class="review__author">Ava Blaze</p>
        </li>


        <li class="review__item">
            <h4 class="review__heading">
                <span class="review__title">Easy and customizable - good plugin.</span>
                <span class="review__stars">⭐️⭐️⭐️⭐️⭐️</span>
            </h4>
            <p class="review__content">Good plugin, does what you need it to do. I use it on all of my websites for easy
                navigation. </p>
            <p class="review__author">Zane Shadow</p>
        </li>

        <li class="review__item">
            <h4 class="review__heading">
                <span class="review__title">I just bought this plug in and</span>
                <span class="review__stars">⭐️⭐️⭐️⭐️⭐️</span>
            </h4>
            <p class="review__content">All was so easy to install into word press straight away also a licence key
                provided,
                and after activation what a fantastic product </p>
            <p class="review__author">Bella Storm</p>
        </li>

        <li class="review__item">
            <h4 class="review__heading">
                <span class="review__stars">⭐️⭐️⭐️⭐️⭐️</span>
            </h4>
            <p class="review__content">Super Plugin! Use it for all my clients! </p>
            <p class="review__author">Kai Thunder</p>
        </li>

        <li class="review__item">
            <h4 class="review__heading">
                <span class="review__stars">⭐️⭐️⭐️⭐️⭐️</span>
            </h4>
            <p class="review__content">Thanks a lot. I appreciate your quick replies and useful tips from the Support
                Team </p>
            <p class="review__author">Ella Frost</p>
        </li>

        <li class="review__item">
            <h4 class="review__heading">
                <span class="review__stars">⭐️⭐️⭐️⭐️⭐️</span>
            </h4>
            <p class="review__content">Greatest support ever! </p>
            <p class="review__author">Milo Vortex</p>
        </li>

        <li class="review__item">
            <h4 class="review__heading">
                <span class="review__stars">⭐️⭐️⭐️⭐️⭐️</span>
            </h4>
            <p class="review__content">Awesome support with good solution, thank you so much!!! </p>
            <p class="review__author">Raven Star</p>
        </li>

        <li class="review__item">
            <h4 class="review__heading">
                <span class="review__stars">⭐️⭐️⭐️⭐️⭐️</span>
            </h4>
            <p class="review__content">Love your plugins and support!!!!!!! I’m going to use them on my.new sites going
                forward </p>
            <p class="review__author">Leo Blaze</p>
        </li>

        <li class="review__item">
            <h4 class="review__heading">
                <span class="review__stars">⭐️⭐️⭐️⭐️⭐️</span>
            </h4>
            <p class="review__content">It’s hard for a not native english speaking to understand the construction. At
                least, I found out by myself what was meant. BUT, the support is very very fast. So BIG POINTS on this!
                Thanks for being this fast. 🙂 </p>
            <p class="review__author">Nina Spark</p>
        </li>

        <li class="review__item">
            <h4 class="review__heading">
                <span class="review__stars">⭐️⭐️⭐️⭐️⭐️</span>
            </h4>
            <p class="review__content">THIS IS EXACTLY WHAT I NEED</p>
            <p class="review__author">Theo Phantom</p>
        </li>

        <li class="review__item">
            <h4 class="review__heading">
                <span class="review__stars">⭐️⭐️⭐️⭐️⭐️</span>
            </h4>
            <p class="review__content">Wow that was fast support!!! Thank you that works 🙂</p>
            <p class="review__author">Ruby Flame</p>
        </li>

        <li class="review__item">
            <h4 class="review__heading">
                <span class="review__stars">⭐️⭐️⭐️⭐️⭐️</span>
            </h4>
            <p class="review__content">The support responds quickly, the suggested solution helped to solve the problem.
                Thanks</p>
            <p class="review__author">Aria Echo</p>
        </li>
    </ul>

/* Main Style fo page */
html {
  min-height: 100vh;
  margin: 0;
  padding: 0;
  background-image: linear-gradient(to right bottom, #eafaff, #e6faf9, #e5f9f1, #e9f6e8, #f1f3e0, #f7eedc, #fde9db, #ffe5de, #fee1e5, #f5deed, #e6def4, #d4dff6);
  font-family: 'Open Sans', Helvetica, Arial, sans-serif;
  color: #333;
  font-size: 16px;
}

body {
  max-width: 1024px;
  margin: auto;
  font-size: 16px;
  background-color: transparent;
}

h1 {
  margin: 24px 0;
  padding-bottom: 24px;
  font-size: 32px;
  border-bottom: solid 2px #dedede;
  color: #262626;
}

#container {
  text-align: center;
  margin: 32px 0 84px;
}

#container p {
  font-size: 13px !important;
  line-height: 18px;
  padding-bottom: 20px
}

#container h2 {
  font-size: 18px;
  font-weight: 200
}

#container a {
  color: #007BFF;
}

/*
* ===========================
* Style Start
* ===========================
*/

.list__review {
  column-width: 18rem;
  column-gap: 1.5rem;
  list-style: none;
  padding-inline: 1rem;
  margin: 2rem 0;
}

.review__item:not(:first-child) {
  margin-block-start: 1.5rem;
}

.review__item {
  position: relative;
  background: linear-gradient(135deg, rgb(182 219 255) 0, rgb(238, 248, 255) 100%);
  border-radius: 0.8em;
  padding: 1.25rem;
  break-inside: avoid;
}

.review__heading {
  position: absolute;
  inset: 0 auto auto 0;
  background: #ffffff;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0 !important;
  border-radius: 25px;
  padding: 5px 10px;
  line-height: 1;
  transform: translate(-10px, -50%);
  box-shadow: 0 0 0 1px rgba(10, 10, 10, 0.05), 0 1px 0 0 rgba(10, 10, 10, 0.05), 0 0.1em 0.6em -0.5em rgba(10, 10, 10, 0.05), 0 0.2em 1.2em -0.8em rgba(10, 10, 10, 0.1), 0 0.3em 0.7em -0.6em rgba(10, 10, 10, 0.2), 0 0.4em 0.8em -0.7em rgba(10, 10, 10, 0.3);
}

.review__title {
  position: relative;
  font-size: 0.625rem;
}

.review__title::after {
  position: absolute;
  inset: -5px -0.25rem -5px auto;
  content: '';
  height: calc(0.625rem + 10px);
  width: 1px;
  background: rgba(10, 10, 10, 0.1);
}

.review__stars {
  font-size: 0.625rem;
}

.review__content {
  font-size: 0.875rem;
  line-height: 1.4;
  color: #222222;
}

.review__author {
  font-style: italic;
  font-size: 0.75rem;
}