/* Last update: 2025-07-07T03:22:04+00:00 */

.wa-collection-card {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-start;
  position: relative;
  padding: var(--space-m);
  overflow: hidden;
  gap: var(--space-xs);
  aspect-ratio: 1;
  height: 100%;
}
.wa-collection-card--banner {
  display: none;
}
.wa-collection-card-wrapper {
  height: 100%;
  container: collection-card / inline-size;
}
.wa-collection-card__img {
  position: absolute;
  width: 100%;
  height: 100%;
  right: 0;
  top: 0;
  z-index: 1;
  object-fit: cover;
  transition: 0.3s all ease-in-out;
  background-color: var(--black);
}
.wa-collection-card__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: 0.3s all ease-in-out;
}
.wa-collection-card__content {
  display: none;
}
@media (min-width: 1281px) {
  .wa-collection-card__content {
    display: flex;
    flex-direction: column;
    position: relative;
    gap: var(--space-xs);
    z-index: 2;
    transition: 0.5s all ease-in-out;
  }
}
.wa-collection-card__content--hover {
  position: relative;
  display: flex;
  flex-direction: column;
  position: relative;
  gap: var(--space-xs);
  z-index: 2;
  transition: 0.5s all ease-in-out;
}
@media (min-width: 1281px) {
  .wa-collection-card__content--hover {
    position: absolute;
    transition: 0.3s all ease-in-out;
    transform: translateY(200%);
  }
}
.wa-collection-card__title {
  font-size: var(--text-xl);
  color: var(--white);
  text-transform: uppercase;
}
.wa-collection-card__desc {
  color: var(--white);
}
.wa-collection-card .wa-button {
  width: fit-content !important;
  line-height: 1;
}
@media (min-width: 1281px) {
  .wa-collection-card:hover .wa-collection-card__img img {
    opacity: 0.5;
    transform: scale(1.01);
  }
  .wa-collection-card:hover .wa-collection-card__content {
    opacity: 0;
  }
  .wa-collection-card:hover .wa-collection-card__content--hover {
    opacity: 1;
    transform: translateX(0);
  }
}
@container collection-card (max-width: 380px) {
  .wa-collection-card {
    padding: var(--space-s);
  }
}
@container collection-card (max-width: 280px) {
  .wa-collection-card {
    gap: calc(var(--space-xs) * .5);
  }
  .wa-collection-card__desc {
    display: none;
  }
  .wa-collection-card .wa-button {
    padding: var(--space-xs);
    font-size: var(--text-s);
  }
}
@container collection-card (max-width: 200px) {
  .wa-collection-card .wa-button {
    font-size: calc(var(--text-xs) * 0.9);
  }
}