@use '../utilities';
@use '../components/columns';
@use '../components/wave-img';

h1 {
  margin-bottom: utilities.space(4);
}

p {
  margin-bottom: utilities.space(2);
}

.products-grid {
  margin-top: utilities.space(4);

  .product-item {
    margin-bottom: utilities.space(4);

    &:last-child {
      margin-bottom: 0;
    }

    img {
      width: 100%;
    }

    p,
    a {
      display: flex;
      justify-content: center;
      text-align: center;
      color: utilities.$text-dark;
      font-weight: 800;
      font-size: 2.8rem;
      text-decoration: none;
    }

    p {
      margin: utilities.space(2) 0 0;
    }

    bdi {
      font-size: 1.6rem;
      color: utilities.$text-primary;
    }
  }
}

@media screen and (width >= 768px) {
  .products-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: utilities.space(4);

    .product-item {
      margin-bottom: 0;

      img {
        width: 100%;
      }
    }
  }
}

@media screen and (width >= 1280px) {
  h1,
  h2 {
    font-size: 4.8rem;
  }

  .products-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: utilities.space(4);
    margin-top: utilities.space(8);
  }
}