@media screen and (max-width: 576px) {
  .bannerWrapper {
    margin-top: 3rem;
    min-height: 60vh;
    grid-template-areas:
      "image"
      "info";
    grid-gap: 4rem;

    .image {
      width: 300px;

      .ratingDiv {
        width: 200px;
        display: flex;
        align-items: center;
        gap: 5px;
        padding: 5px;
        cursor: pointer;
        border-radius: 5px;
        background-image: linear-gradient(
          to right,
          #ff512f 0%,
          #dd2476 51%,
          #ff512f 100%
        );

        .fa-star {
          color: gold;
          font-size: 1.1rem;
        }

        .rateInfo {
          .rateInfoPara1 {
            font-size: 1.3rem;
            font-weight: 500;
          }
          .rateInfoPara2 {
            font-size: 1.1rem;
            font-weight: 300;
          }
        }
      }
    }

    .info {
      gap: 1rem;
      text-align: center;

      .infoHead {
        font-size: 1.5rem;
      }

      .infoPara {
        font-size: 14px;
        letter-spacing: normal;
        font-weight: 300;
      }

      .infoBtn {
        width: 150px;
        font-size: 1rem;
        padding: 5px;
        border-radius: 5px;

        .fa-arrow-trend-up {
          text-shadow: 1px 2px 3px pink;
        }
      }
    }
  }

  .productWrapper {
    gap: 2rem;

    .productInfo {
      text-align: center;
      gap: 1rem;

      .productHead {
        font-size: 1.5rem;
        letter-spacing: normal;
      }

      .productPara {
        font-size: 14px;
        letter-spacing: 1px;
      }
    }

    .productItems {
      img {
        width: 100px;
      }

      .productItem {
        padding: 5px;

        h3 {
          font-size: 1rem;
          font-weight: 500;
        }

        p {
          font-size: 14px;
          font-weight: 300;
          letter-spacing: normal;
          word-spacing: normal;
        }
      }
    }
  }

  .underProductWrapper {
    grid-template-areas:
      "upi"
      "upim";

    .unProImage {
      grid-area: upim;
    }

    .unProInfo {
      grid-area: upi;

      .unProInfoHead {
        font-size: 1.5rem;
        line-height: 90%;
      }

      .unProInfoPara {
        font-size: 14px;
        font-weight: 300;
      }

      .unProInfosHead {
        font-size: 1.2rem;
        line-height: 90%;
      }
    }
  }
}
/* 
@media screen and (min-width: 577px) {
  .bannerWrapper {
    background: purple;
    grid-template-areas:
      "image"
      "info";
  }
}

@media screen and (min-width: 769px) {
  .bannerWrapper {
    background: burlywood;
    grid-template-areas: "info image";
  }
}

@media screen and (min-width: 993px) {
  .bannerWrapper {
    background: goldenrod;
    grid-template-areas: "info image";
  }
}

@media screen and (min-width: 1201px) {
  .bannerWrapper {
    background: greenyellow;
    grid-template-areas: "info image";
  }
}

@media screen and (min-width: 1401px) {
  .bannerWrapper {
    background: rgb(137, 47, 255);
    grid-template-areas: "info image";
  }
} */