/* -------------------------------- 

File#: _2_card-v13
Title: Card v13
Descr: Container of information used as teaser for further content exploration
Usage: codyhouse.co/license

-------------------------------- */
.card-v13 {
  --transition-duration: .3s;
}

.card-v13__figure-wrapper {
  display: block;
}

.card-v13__figure {
  -webkit-clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
          clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
  transition: -webkit-clip-path var(--transition-duration) var(--ease-out);
  transition: clip-path var(--transition-duration) var(--ease-out);
  transition: clip-path var(--transition-duration) var(--ease-out), -webkit-clip-path var(--transition-duration) var(--ease-out);
}
.card-v13__figure img {
  display: block;
  width: 100%;
  transform: scale(1.1);
  filter: grayscale(100%);
  transition: transform var(--transition-duration) var(--ease-out), filter var(--transition-duration);
}
.card-v13__figure-wrapper:hover .card-v13__figure {
  -webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
          clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
}
.card-v13__figure-wrapper:hover .card-v13__figure img {
  transform: scale(1);
  filter: grayscale(0%);
}

.card-v13__separator {
  display: block;
  width: 40px;
  height: 3px;
  background-color: hsla(var(--color-contrast-higher-h), var(--color-contrast-higher-s), var(--color-contrast-higher-l), 0.1);
}