@media (max-width: 767px) {
  .collection-v62 {
    row-gap: 1.5rem;
  }
}

.collection-v62__zoom {
  transition: all 0.4s ease-in-out;
  position: unset;
}
.collection-v62__zoom xo-image-zoom-inner {
  position: absolute;
  z-index: 2;
  opacity: 0;
  transition: all 0.3s ease-in-out;
}

.collection-v62__zoom:hover xo-image-zoom-inner {
  opacity: 1;
}

.collection-v62__item {
  position: relative;
  z-index: 3;
  display: block;
  transition: all 0.4s ease-in-out;
  aspect-ratio: var(--aspect-ratio);
  border: solid 0.2rem rgba(var(--color-background), 0.6);
}

.collection-v62__item:hover {
  background-color: rgba(var(--color-background));
}
.collection-v62__item:hover .collection-v62__item-title {
  color: rgba(var(--color-accent));
}
.collection-v62__item:hover .collection-v62__button {
  opacity: 1;
}

.collection-v62__content {
  position: absolute;
  top: 5rem;
  left: 5rem;
  right: 5rem;
  bottom: 5rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.collection-v62__item-title {
  font-size: calc(var(--font-heading-scale) * var(--font-body-scale) * 3.4rem);
  font-family: var(--font-custom-family);
  font-weight: 500;
  text-transform: capitalize;
  margin-bottom: 0.6rem;
  transition: 0.3s;
}

.collection-v62__item-count {
  font-size: calc(var(--font-body-scale) * 1.4rem);
  font-weight: 500;
  text-transform: capitalize;
  color: rgba(var(--color-foreground));
}

.collection-v62__button {
  color: rgba(var(--color-foreground));
  text-transform: capitalize;
  font-size: calc(var(--font-body-scale) * 1.4rem);
  line-height: calc(1 + 0.6 / var(--font-body-scale));
  font-weight: 500;
  width: fit-content;
  padding: 0 1rem;
  margin: 1rem 0;
  box-shadow: 0 -0.9rem rgba(var(--color-accent), 0.4) inset;
  opacity: 0;
  transition: 0.3s ease;
}

.collection-v62__button:hover {
  color: rgba(var(--color-background));
  padding: 1rem;
  box-shadow: 0 -5rem rgba(var(--color-accent)) inset;
  margin: 0;
}