/* Shared collection-card motion contract, matched to the homepage. */
.collections-section .collection-card > img,
.collections__grid .collection-card__visual img,
.collections-card__visual img {
  will-change: transform;
  transform: scale(1);
  transition: transform 520ms cubic-bezier(.16, 1, .3, 1);
}

.collections-card__more,
.collections__grid .collection-card__more {
  transition:
    background-color 220ms cubic-bezier(.23, 1, .32, 1),
    transform 220ms cubic-bezier(.23, 1, .32, 1);
}

.collections-card__more img,
.collections__grid .collection-card__more img {
  transition:
    filter 220ms cubic-bezier(.23, 1, .32, 1),
    transform 220ms cubic-bezier(.23, 1, .32, 1);
}

@media (hover: hover) and (pointer: fine) {
  .collections-section .collection-card:hover,
  .collections__grid .collection-card:hover,
  .collections-card:hover {
    opacity: 1;
  }

  .collections-section .collection-card:hover > img,
  .collections__grid .collection-card:hover .collection-card__visual img,
  .collections-card:hover .collections-card__visual img {
    transform: scale(1.04);
  }

  .collections-card:hover .collections-card__more,
  .collections__grid .collection-card:hover .collection-card__more {
    background-color: #3fa654;
    transform: translateY(-2px);
  }

  .collections-card:hover .collections-card__more img,
  .collections__grid .collection-card:hover .collection-card__more img {
    filter: brightness(0) invert(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .collections-section .collection-card > img,
  .collections__grid .collection-card__visual img,
  .collections-card__visual img,
  .collections-card__more,
  .collections-card__more img,
  .collections__grid .collection-card__more,
  .collections__grid .collection-card__more img {
    transition: none;
  }

  .collections-section .collection-card:hover > img,
  .collections__grid .collection-card:hover .collection-card__visual img,
  .collections-card:hover .collections-card__visual img {
    transform: scale(1);
  }

  .collections-card:hover .collections-card__more,
  .collections__grid .collection-card:hover .collection-card__more {
    transform: none;
  }
}