.categories-grid {
  max-width: 1920px;
  margin: 0 auto;
  z-index: 2;
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;

  --max-gap: 40;
  --min-gap: 20;
  --maxtrans-gap: 1920;
  --mintrans-gap: 1300;
  gap: clamp(
    var(--min-gap) * 1px,
    calc(
      (var(--max-gap) - var(--min-gap)) *
        (
          (100vw - var(--mintrans-gap) * 1px) /
            (var(--maxtrans-gap) - var(--mintrans-gap))
        ) + var(--min-gap) * 1px
    ),
    var(--max-gap) * 1px
  ) !important;

  padding: 40px;
  --max: 250;
  --min: 20;
  --maxtrans: 1920;
  --mintrans: 430;
  padding-inline: clamp(
    var(--min) * 1px,
    calc(
      (var(--max) - var(--min)) *
        ((100vw - var(--mintrans) * 1px) / (var(--maxtrans) - var(--mintrans))) +
        var(--min) * 1px
    ),
    var(--max) * 1px
  );
  background-color: white;
  /* padding-top: 10px !important; */
}

@media (max-width: 1300px) {
  .categories-grid {
    grid-template-columns: repeat(2, 1fr);
    padding: 20px;
    --max: 200;
    --min: 20;
    --maxtrans: 1300;
    --mintrans: 700;
    padding-inline: clamp(
      var(--min) * 1px,
      calc(
        (var(--max) - var(--min)) *
          (
            (100vw - var(--mintrans) * 1px) /
              (var(--maxtrans) - var(--mintrans))
          ) + var(--min) * 1px
      ),
      var(--max) * 1px
    ) !important;
  }
}
@media (max-width: 700px) {
  .categories-grid {
    grid-template-columns: repeat(1, 1fr);
    --max: 150;
    --min: 20;
    --maxtrans: 700;
    --mintrans: 430;
    padding-inline: clamp(
      var(--min) * 1px,
      calc(
        (var(--max) - var(--min)) *
          (
            (100vw - var(--mintrans) * 1px) /
              (var(--maxtrans) - var(--mintrans))
          ) + var(--min) * 1px
      ),
      var(--max) * 1px
    ) !important;
  }
}

.categories-grid a {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.categories-grid a .wrapper {
  position: relative;
  /* height: 250px; */
  overflow: hidden;
  --max: 250;
  --min: 180;
  --maxtrans: 1920;
  --mintrans: 1300;
  height: clamp(
    var(--min) * 1px,
    calc(
      (var(--max) - var(--min)) *
        ((100vw - var(--mintrans) * 1px) / (var(--maxtrans) - var(--mintrans))) +
        var(--min) * 1px
    ),
    var(--max) * 1px
  ) !important;
}

.categories-grid a .wrapper img {
  position: relative;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
  filter: brightness(70%);
  transition: all 0.3s ease-in-out;
}

.categories-grid a .wrapper h4 {
  position: absolute;
  object-fit: cover;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 0;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: "Poppins", sans-serif;
  color: white;

  --max-fs: 26;
  --min-fs: 24;
  --maxtrans-fs: 1920;
  --mintrans-fs: 430;
  font-size: clamp(
    var(--min-fs) * 1px,
    calc(
      (var(--max-fs) - var(--min-fs)) *
        (
          (100vw - var(--mintrans-fs) * 1px) /
            (var(--maxtrans-fs) - var(--mintrans-fs))
        ) + var(--min-fs) * 1px
    ),
    var(--max-fs) * 1px
  ) !important;

  font-weight: 900;
  text-transform: uppercase;
  text-align: center;
  width: 100%;
}
.categories-grid a span {
  font-family: "Poppins", sans-serif;
  color: black;
  font-size: 14;
  font-weight: 500;
  text-decoration: underline;
}
.categories-grid a:hover span {
  color: #d7a569;
}
.categories-grid a:hover img {
  filter: brightness(40%);
  scale: 1.2;
  transition: all 0.3s ease-in-out;
}