.cards {
  --card-alignment: flex-start;
  --card-background: var(--color-white);
  --card-column-count: 1;
  --card-gap: clamp(1rem, 4vw, 2rem);
  --card-media-aspect-ratio: 4 / 3;
  --card-padding: clamp(1.35rem, 3.5vw, 2rem);
  --card-shadow: var(--media-shadow);
  /* --card-shadow-hover: 0 4px 35px -5px rgb(0, 0, 0, 0.1); */
  --card-gap-clear: calc(var(--card-gap) * (var(--card-column-count) - 1));
  --card-row-alignment: center;
  display: flex;
  flex-flow: row wrap;
  gap: var(--card-gap);
  justify-content: var(--card-row-alignment);
}

@media (min-width: 650px) {
  .cards {
    --card-column-count: 2;
  }
}

@media (min-width: 990px) {
  .cards {
    --card-column-count: 3;
  }
}

@media (min-width: 1500px) {
  .cards {
    --card-column-count: 4;
  }
}

[data-theme='dark'] .cards {
  --card-background: var(--color-background-alt);
}

@media (prefers-color-scheme: dark) {
  [data-theme='system'] .cards {
    --card-background: var(--color-background-alt);
  }
}

.card {
  background-color: rgb(var(--card-background));
  border-left: 5px solid rgb(var(--color-foreground));
  border-image: linear-gradient(
      180deg,
      rgb(var(--color-foreground)),
      rgb(var(--card-background))
    )
    1;
  border-radius: var(--card-radius);
  box-shadow: var(--card-shadow);
  display: flex;
  flex-basis: calc((100% - var(--card-gap-clear)) / var(--card-column-count));
  flex-flow: column;
  /* overflow: hidden; */
  position: relative;
  transition: 0.2s all;
}

.card--accent {
  border-left: none;
  border-bottom: 3px solid rgb(var(--color-tertiary));
  border-image: linear-gradient(
      90deg,
      rgb(var(--color-tertiary)),
      rgb(var(--card-background))
    )
    1;
}

@keyframes cardAccentDropDown {
  0% {
    transform: skewY(330deg) translate(0, 1rem) scaleY(0.4);
  }

  50% {
    transform: skewY(325deg) translate(0, 1.25rem) scaleY(0.425);
  }

  100% {
    transform: skewY(330deg) translate(0, 1.5rem) scaleY(0.4);
  }
}

@keyframes cardAccentDropDownRev {
  0% {
    transform: skewY(330deg) translate(0, 1rem) scaleY(0.4);
  }

  50% {
    transform: skewY(330deg) translate(0, 1.25rem) scaleY(0.425);
  }

  100% {
    transform: skewY(330deg) translate(0, 1.5rem) scaleY(0.4);
  }
}

.card--accent:before {
  animation: cardAccentDropDownRev 0.3s cubic-bezier(0.09, 0.29, 0.55, 0.82) 0s 1 reverse
    both;
  background: rgb(var(--color-secondary));
  content: '';
  height: 100%;
  left: -0.55rem;
  position: absolute;
  top: 0;
  width: 1.1rem;
  transform: skewY(330deg) translateY(1rem) scaleY(0.4);
  transform-origin: center top;
  transition: 0.2s transform;
}

.card--accent:hover::before {
  animation: cardAccentDropDown 0.5s cubic-bezier(0.09, 0.29, 0.55, 0.82) 0s 1 normal
    forwards;
}

.js .cards[data-mh-animation] {
  will-change: auto !important;
}

.js .cards[data-mh-animation] .card {
  opacity: 0;
}

.cards.animated .card {
  animation: var(--card-animation) 1s cubic-bezier(0.46, 0.52, 0.09, 1.01)
    forwards;
  animation-delay: calc(var(--card-animation-delay));
}

.card a:not(.button) {
  color: inherit;
}

.card--has-link:hover {
  box-shadow: var(--card-shadow-hover);
  transition: all 0.2s ease;
}

.card__image {
  aspect-ratio: var(--card-media-aspect-ratio);
  border-radius: var(--card-radius);
  display: block;
  object-fit: cover;
  transition: filter 0.2s, transform 0.2s;
}

.card__image:not(.card__image--padded) {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  margin: calc(var(--card-padding) * -1);
  margin-bottom: var(--card-padding);
  max-width: calc(100% + var(--card-padding) * 2);
}

.card__link {
  color: inherit;
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
}

.card__link:hover,
.card__link:focus {
  opacity: 1;
}

.card--has-link img {
  transition: 0.1s transform ease;
}

.card--has-link:hover img,
.card--has-link:focus-within img {
  transform: scale(1.1) rotate(3deg);
  transition: 0.6s transform ease;
}

.card__content {
  display: flex;
  flex-direction: column;
  height: 100%;
  justify-content: var(--card-alignment);
  padding: var(--card-padding);
  position: relative;
  width: 100%;
}

.card__link:focus .card__content {
  transform: scale(0.9);
  outline: none;
  box-shadow: 0 0 0 6px rgba(var(--rgb-secondary), 1);
}

.card__sub-title {
  display: block;
  font-size: 0.9em;
  opacity: 0.8;
}

.card__title {
  display: block;
  line-height: 1;
  text-decoration: none;
}

.card__title:not(.h2):not(.h3):not(.h4):not(.h5) {
  font-size: 1.5em;
  font-weight: inherit;
}

.card__text {
  margin: 1em 0;
}

.card__text p {
  line-height: inherit;
}

.card__text p:first-child,
.card__text p:last-child {
  margin: 0;
}

.card__icon {
  align-self: var(--card-icon-alignment);
  background: var(--card-icon-background);
  border-radius: var(--card-icon-border_radius);
  height: var(--card-icon-size);
  margin-bottom: 1em;
  object-fit: contain;
  padding: var(--card-icon-padding);
  transition: all 0.2s;
  width: var(--card-icon-size);
}

.card__icon--auto-height {
  height: auto;
}

.card__ctas {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.text-center .card__ctas {
  margin-left: auto;
  margin-right: auto;
}

.text-right .card__ctas {
  margin-left: auto;
}

/* masonry */
.cards--masonry:not(.colcade) {
  columns: var(--card-column-count) 200px;
  column-gap: var(--card-gap);
}

.cards--masonry:not(.colcade) .cards {
  margin: 0 0 var(--card-gap) 0;
  width: 100%;
}

.cards--masonry:not(.colcade) .card {
  vertical-align: middle;
}

.colcade.cards--masonry {
  display: grid;
  gap: var(--card-gap);
  grid-template-columns: repeat(var(--card-column-count), 1fr);
}

.cards-masonry__col {
  display: none;
}

.colcade .cards-masonry__col {
  flex-flow: column;
  gap: inherit;
}

.colcade .cards-masonry__col:first-child,
.colcade.cards-masonry--col-2 .cards-masonry__col:nth-child(-n+2) {
  display: flex;
}

@media (min-width: 650px) {
  .colcade.cards-masonry--col-1\@md .cards-masonry__col:first-child,
  .colcade.cards-masonry--col-2\@md .cards-masonry__col:nth-child(-n+2),
  .colcade.cards-masonry--col-3\@md .cards-masonry__col:nth-child(-n+3),
  .colcade.cards-masonry--col-4\@md .cards-masonry__col:nth-child(-n+4) {
    display: flex;
  }

  .colcade .cards-masonry__col:nth-child(even) {
    margin-top: var(--card-gap);
  }
}

@media (min-width: 990px) {
  .colcade.cards-masonry--col-1\@lg .cards-masonry__col:first-child,
  .colcade.cards-masonry--col-2\@lg .cards-masonry__col:nth-child(-n+2),
  .colcade.cards-masonry--col-3\@lg .cards-masonry__col:nth-child(-n+3),
  .colcade.cards-masonry--col-4\@lg .cards-masonry__col:nth-child(-n+4) {
    display: flex;
  }
}

@media (min-width: 1500px) {
  .colcade.cards-masonry--col-1\@xl .cards-masonry__col:first-child,
  .colcade.cards-masonry--col-2\@xl .cards-masonry__col:nth-child(-n+2),
  .colcade.cards-masonry--col-3\@xl .cards-masonry__col:nth-child(-n+3),
  .colcade.cards-masonry--col-4\@xl .cards-masonry__col:nth-child(-n+4) {
    display: flex;
  }
}