/* img grid */
div[class^="p-imagegrid-cat-"] {
  display: grid;
  justify-items: center;
  gap: 10px;
  overflow-x: auto;
  overflow-y: hidden;
  grid-auto-flow: column;
}
img.p-imagegrid-img {
  width: clamp(1%, 100%, var(--img-width));
  height: clamp(1%, 100%, var(--img-height));
  object-fit: cover;
  border-radius: var(--border-radius);
  transition: 0.3s ease;
}
a[class^="p-imagegrid-item-"] {
  position: relative;
  overflow: hidden;
  border-radius: var(--border-radius);
  border: 1px solid transparent;
  transition: 0.3s ease;
}
@media (min-width: 300px) {
  div[class^="p-imagegrid-cat-"] {
    /* grid-template-columns: repeat(3, 1fr); */
    grid-template-rows: repeat(2, 1fr);
  }
}

/*media queries for images Not overflowing*/
@media (min-width: 768px) {
  div[class^="p-imagegrid-cat-"] {
    /* grid-template-columns: repeat(6, 1fr); */
    grid-template-rows: repeat(1, 1fr);
  }
}
a[class^="p-imagegrid-item-"]:hover {
  border: 1px solid var(--games-border);
}
a[class^="p-imagegrid-item-"]:hover img.p-imagegrid-img {
  scale: 1.05;
  filter: brightness(0.35);
}

/*dynamic text size*/
div.p-imagegrid-textswrap,
div.p-imagegrid-button {
  font-size: clamp(8px, 0.9em, 24px);
}
i.p-imagegrid-faicon-img {
  font-size: clamp(16px, 2em, 64px);
}
img.p-imagegrid-iconlink-img {
  max-width: clamp(25px, 3em, 100px) !important;
}

/*overlay*/
div.p-imagegrid-overlay {
  display: flex;
  align-items: center;
  justify-content: center;
  row-gap: clamp(4px, 0.3em, 8px);
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
  flex-direction: column;
  color: white;
}
a[class^="p-imagegrid-item-"]:hover div.p-imagegrid-overlay {
  opacity: 1;
}
div.p-imagegrid-textswrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 90%;
}
div.p-imagegrid-iconlink,
div.p-imagegrid-button {
  pointer-events: auto;
  transition: 0.3s ease;
}
span.p-imagegrid-title {
  text-align: center;
}

/*overlay onhover effects*/
div.p-imagegrid-iconlink i::before {
  transition: 0.3s ease;
  display: inline-block;
}
div.p-imagegrid-iconlink:hover i::before,
div.p-imagegrid-iconlink:hover {
  scale: 1.1;
}
div.p-imagegrid-button {
  color: black;
  border: 1px solid transparent;
  background-color: var(--btn-color);
  border-radius: var(--border-radius);
  padding: 0.25em 0.75em 0.25em 0.75em;
  transition: 0.3s ease;
}
div.p-imagegrid-button:hover {
  color: white;
  border: 1px solid white;
}
span.p-imagegrid-title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
span.p-imagegrid-provider {
  position: absolute;
  bottom: 0;
  background: rgb(0 0 0 / 35%);
  width: 100%;
  height: 7%;
  font-size: clamp(6px, 0.75em, 10px) !important;
  display: flex;
  align-items: center;
  justify-content: center;
}
@media (min-width: 1440px) {
  span.p-imagegrid-provider {
    font-size: clamp(6px, 0.65em, 16px) !important;
  }
}

/* img grid scrollbar*/

div[class^="p-imagegrid-cat-"] {
  padding-bottom: 3px;
}
div[class^="p-imagegrid-cat-"]::-webkit-scrollbar {
  height: 4px;
}
div[class^="p-imagegrid-cat-"]::-webkit-scrollbar-track {
  background: var(--bg-color);
}
div[class^="p-imagegrid-cat-"]::-webkit-scrollbar-thumb {
  /* background-color: transparent; */
  background-color: rgba(0, 0, 0, 0.2);
  /* border-radius: 50px; */
}
div[class^="p-imagegrid-cat-"]:hover::-webkit-scrollbar-thumb {
  background-color: var(--scrollbar-color);
}

/* ---------- */
/* scrollable */
/* ---------- */
@media (max-width: 480px) {
  div[class^="p-imagegrid-cat-"] {
    justify-content: space-around;
    grid-auto-columns: max-content !important;
    /* grid-template-columns: max-content !important; */
    grid-template-rows: repeat(1, auto);
  }
  img.p-imagegrid-img {
    width: clamp(
      calc(var(--img-width) / 2.5),
      35vw,
      var(--img-width)
    ) !important;
    height: auto !important;
  }
}
/* ---------- */
/* scrollable */
/* ---------- */