An unexpected CSS error occurs specifically on iPhones

Question

I've been working on a section in the photo on android

where I utilized grid and clip-path, and it looks fantastic on all devices except iPhone's. Interestingly, it functions perfectly on Mac and iPad, but unfortunately, it doesn't display properly on iPhone (mobile).

with section header

]1

I'm unsure about the problem I'm experiencing. If you've encountered a similar issue before, could you please share your insights and suggestions to help me resolve it?

/*member of the months*/

.member-of-the-months {
  padding: var(--section-top-bottom-padding) 0;
  position: relative;
}

.member-of-the-months>.container {
  padding: 0 15px;
}

@media (min-width: 992px) {
  .member-of-the-months__rows-wrapper {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(3, auto);
    gap: 1rem;
  }
  .member-of-the-month-polygon:nth-child(1),
  .member-of-the-month-polygon:nth-child(2),
  .member-of-the-month-polygon:nth-child(3) {
    grid-row: 1 / 2;
    margin-left: 53%;
  }
  .member-of-the-month-polygon:nth-child(4),
  .member-of-the-month-polygon:nth-child(5),
  .member-of-the-month-polygon:nth-child(6),
  .member-of-the-month-polygon:nth-child(7) {
    grid-row: 2 / 3;
    margin-top: -50%;
    margin-bottom: -100%;
  }
  .member-of-the-month-polygon:nth-child(8),
  .member-of-the-month-polygon:nth-child(9),
  .member-of-the-month-polygon:nth-child(10) {
    grid-row: 3 / 4;
    margin-left: 53%;
  }
}

.member-of-the-month-polygon {
  width: 100%;
  aspect-ratio: 1 / 1;
}

.member-of-the-month-polygon {
  position: relative;
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}

@media (min-width: 768px) and (max-width: 991px) {
  .member-of-the-months__rows-wrapper {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(6, auto);
    gap: 1rem;
  }
  .member-of-the-month-polygon {
    width: 100%;
    aspect-ratio: 1 / 1;
  }
  .member-of-the-month-polygon:nth-child(1),
  .member-of-the-month-polygon:nth-child(2),
  .member-of-the-month-polygon:nth-child(3) {
    grid-row: 1 / 2;
  }
  .member-of-the-month-polygon:nth-child(4),
  .member-of-the-month-polygon:nth-child(5) {
    grid-row: 2 / 3;
    margin: -50% 53%;
  }
  .member-of-the-month-polygon:nth-child(6) {
    grid-row: 3 / 4;
    margin: 0 107%;
  }
  .member-of-the-month-polygon:nth-child(7) {
    grid-row: 4 / 5;
    margin: 0 107%;
  }
  .member-of-the-month-polygon:nth-child(8),
  .member-of-the-month-polygon:nth-child(9) {
    grid-row: 5 / 6;
    margin: -50% 53%;
  }
  .member-of-the-month-polygon:nth-child(10) {
    grid-row: 6 / 7;
    margin: 0 107%;
  }
}

@media (max-width: 767px) {
  .member-of-the-months__rows-wrapper {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(7, auto);
    gap: 1rem;
  }
  .member-of-the-month-polygon {
    width: 100%;
    aspect-ratio: 1 / 1;
  }
  .member-of-the-month-polygon:nth-child(1) {
    grid-row: 1 / 2;
    margin: 0 53%;
  }
  .member-of-the-month-polygon:nth-child(2),
  .member-of-the-month-polygon:nth-child(3) {
    grid-row: 2 / 3;
    margin: -50% 0;
  }
  .member-of-the-month-polygon:nth-child(4) {
    grid-row: 3/ 4;
    margin: 0 53%;
  }
  .member-of-the-month-polygon:nth-child(5),
  .member-of-the-month-polygon:nth-child(6) {
    grid-row: 4 / 5;
    margin: -50% 0;
  }
  .member-of-the-month-polygon:nth-child(7) {
    grid-row: 5 / 6;
    margin: 0 53%;
  }
  .member-of-the-month-polygon:nth-child(8),
  .member-of-the-month-polygon:nth-child(9) {
    grid-row: 6 / 7;
    margin: -50% 0;
  }
  .member-of-the-month-polygon:nth-child(10) {
    grid-row: 7 / 8;
    margin: 0 53%;
  }
}

.member-of-the-months__img {
  width: 100%;
  object-fit: cover;
  aspect-ratio: 1 / 1;
  z-index: 10;
}

.member-of-the-month-polygon-info {
  position: absolute;
  width: 100%;
  height: 100%;
  bottom: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 30px;
  text-align: center;
  line-height: 1.6;
  color: var(--brown-main-color);
  transition: .3s;
  font-weight: 500;
  font-size: 1rem;
}

@media (min-width: 992px) {
  .member-of-the-month-polygon-info {
    font-size: 1.2rem;
  }
}

.member-of-the-month-polygon-info span {
  transition: .3s;
  opacity: 0;
}

.member-of-the-month-polygon:hover .member-of-the-month-polygon-info {
  background-color: rgba(250, 164, 25, 0.5);
}

.member-of-the-month-polygon:hover .member-of-the-month-polygon-info span {
  opacity: 100%;
}

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<section class="member-of-the-months" id="MOM">
  <div class="container">
    <div class="sections-title sections-title--light ">
      <h2 class="section-title__title">Stars of the month</h2>
    </div>
    <div class="member-of-the-months__rows-wrapper">
      <div class="member-of-the-month-polygon">
        <div class="member-of-the-months__img-holder">
          <img loading="lazy" class="member-of-the-months__img" # src="https://placehold.co/400" alt="">
        </div>
        <div class="member-of-the-month-polygon-info">
          <span>Maria Saleem</span>
        </div>
      </div>
      <div class="member-of-the-month-polygon">
        <div class="member-of-the-months__img-holder">
          <img loading="lazy" class="member-of-the-months__img" src="https://placehold.co/400" alt="">
        </div>
        <div class="member-of-the-month-polygon-info">
          <span>Areej Al-Qwaqneh</span>
        </div>
      </div>
      <div class="member-of-the-month-polygon">
        <div class="member-of-the-months__img-holder">
          <img loading="lazy" class="member-of-the-months__img" src="https://placehold.co/400" alt="">
        </div>
        <div class="member-of-the-month-polygon-info">
          <span>Asya AbdelFattah</span>
        </div>
      </div>
      <div class="member-of-the-month-polygon">
        <div class="member-of-the-months__img-holder">
          <img loading="lazy" class="member-of-the-months__img" src="https://placehold.co/400" alt="">
        </div>
        <div class="member-of-the-month-polygon-info">
          <span>Bayan Hamlan</span>
        </div>
      </div>
      <div class="member-of-the-month-polygon">
        <div class="member-of-the-months__img-holder">
          <img loading="lazy" class="member-of-the-months__img" src="https://placehold.co/400" alt="">
        </div>
        <div class="member-of-the-month-polygon-info">
          <span>May Talal</span>
        </div>
      </div>
      <div class="member-of-the-month-polygon">
        <div class="member-of-the-months__img-holder">
          <img loading="lazy" class="member-of-the-months__img" src="https://placehold.co/400" alt="">
        </div>
        <div class="member-of-the-month-polygon-info">
          <span>Moatasem Al-Naimat</span>
        </div>
      </div>
      <div class="member-of-the-month-polygon">
        <div class="member-of-the-months__img-holder">
          <img loading="lazy" class="member-of-the-months__img" src="https://placehold.co/400" alt="">
        </div>
        <div class="member-of-the-month-polygon-info">
          <span>Tasneem Dwaikat </span>
        </div>
      </div>


      <div class="member-of-the-month-polygon">
        <div class="member-of-the-months__img-holder">
          <img loading="lazy" class="member-of-the-months__img" src="https://placehold.co/400" alt="">
        </div>
        <div class="member-of-the-month-polygon-info">
          <span>Mariam Abaza</span>
        </div>
      </div>
      <div class="member-of-the-month-polygon">
        <div class="member-of-the-months__img-holder">
          <img loading="lazy" class="member-of-the-months__img" src="https://placehold.co/400" alt="">
        </div>
        <div class="member-of-the-month-polygon-info">
          <span>Toleen Abu-Adi</span>
        </div>
      </div>
      <div class="member-of-the-month-polygon">
        <div class="member-of-the-months__img-holder">
          <img loading="lazy" class="member-of-the-months__img" src="https://placehold.co/400" alt="">
        </div>
        <div class="member-of-the-month-polygon-info">
          <span>Yara Yaghi</span>
        </div>
      </div>
    </div>
  </div>
</section>