Plans Block in Moshified

Hi friends.
Can you please review my code and help me find the mistake I have done?
I am trying to build the Plans Block of Moshified, but for larger screen my grid is not laying horizontal. I tried to do as Mosh were doing and also width Media query however I am not succeeding. Many thanks

HTML

  <div class="grid grid--1x3">

    <div class="plan">

      <div class="card card--secondary">

        <header class="card__header">

          <h3 class="plan__name">Business</h3>

          <span class="plan__price">$24</span>

          <span class="plan__billing-cycle">/month</span>

          <span class="badge badge--secondary badge--small">20% OFF</span>

          <span class="plan__description">Optimal Cloud experience</span>

        </header>

        <div class="card__body">

          <ul class="list list--tick">

            <li class="list__item">Unlimited Websites</li>

            <li class="list__item">Unlimited Bandwidth</li>

            <li class="list__item">100 GB SSD Storange</li>

            <li class="list__item">3 GB RAM</li>

            <li class="list__item">2 CPU Cores</li>

          </ul>

          <button class="btn btn--outline btn--block">BUY NOW</button>

        </div>

      </div>

    </div>

    <div class="plan plan--popular">

      <div class="card card--primary">

        <header class="card__header">

          <h3 class="plan__name">Business</h3>

          <span class="plan__price">$24</span>

          <span class="plan__billing-cycle">/month</span>

          <span class="badge badge--primary badge--small">20% OFF</span>

          <span class="plan__description">Optimal Cloud experience</span>

        </header>

        <div class="card__body">

          <ul class="list list--tick">

            <li class="list__item">Unlimited Websites</li>

            <li class="list__item">Unlimited Bandwidth</li>

            <li class="list__item">100 GB SSD Storange</li>

            <li class="list__item">3 GB RAM</li>

            <li class="list__item">2 CPU Cores</li>

          </ul>

          <button class="btn btn--outline btn--block">BUY NOW</button>

        </div>

      </div>

    </div>

    <div class="plan">

      <div class="card card--secondary">

        <header class="card__header">

          <h3 class="plan__name">Business</h3>

          <span class="plan__price">$24</span>

          <span class="plan__billing-cycle">/month</span>

          <span class="badge badge--secondary badge--small">20% OFF</span>

          <span class="plan__description">Optimal Cloud experience</span>

        </header>

        <div class="card__body">

          <ul class="list list--tick">

            <li class="list__item">Unlimited Websites</li>

            <li class="list__item">Unlimited Bandwidth</li>

            <li class="list__item">100 GB SSD Storange</li>

            <li class="list__item">3 GB RAM</li>

            <li class="list__item">2 CPU Cores</li>

          </ul>

          <button class="btn btn--outline btn--block">BUY NOW</button>

        </div>

      </div>

    </div>

  </div>

</section>

CSS

/* Plan Block */

.block-plans .grid {

gap: 4rem;

}

@media screen and (min-width: 768px) {

.block-plans .card {

grid-template-columns: repeat(3, 1fr);

max-width: 500px;

margin: 0 auto;

}

}

I already find out my mistake :smiley:

Sometimes better leave issues and try to fix them when you are fresh :)))