/* Card styles are dictated by the parent Cards component. */
.card .switcher {
  --measure: 100rem;
  gap: 0;
}

.card__media .frame {
  --frame-h: 16;
  --frame-v: 9;
}

.card__media .frame iframe {
  width: 100%;
  height: 100%;
}

/* Variants */

/* Card modifier class can be used on the .cards wrapper or on the card. */
/* So we use both types of selector orders for each variant. */

/* Bordered Center */
.card--bordered-center .card,
.card.card--bordered-center {
  box-shadow: 2px 2px 12px rgba(100, 100, 100, .7);
}

.card--bordered-center .card__main {
  /* Because this is also wrapped in '.center' we can cause intrinsic center. */
  --align-items: center;
  text-align: center;
}

/* Media Left */
.card--media-left .switcher {
  --measure: 40rem;
  align-items: center;
}

/* Media Right */
.card--media-right .switcher {
  --measure: 40rem;
  align-items: center;
  flex-direction: row-reverse;
}

/* Overlay */
.card--overlay {
  --bg: var(--color-dark);
  --color: var(--color-light);
  background-color: var(--bg);
}
.card--overlay .card > *,
.card.card--overlay > * {
  --bg: var(--color-dark);
  --color: var(--color-light);
  --heading-color: var(--color);
  display: grid;
  grid-template-areas: "card";
  overflow: hidden;
}

.card--overlay .card > * > *,
.card.card--overlay > * > * {
  grid-area: card;
}

.card--overlay .card__media > * {
  opacity: 1;
  mix-blend-mode: overlay;
  min-inline-size: 100%;
  min-block-size: 100%;
  background: var(--background-image) no-repeat center/cover;
}

.card--overlay .card__media img {
  display: block;
  object-fit: cover;
  height: 100%;
  mix-blend-mode: multiply;
}

.card--overlay .card__main {
  padding: var(--s4);
  z-index: 1;
}

/* Icon */
.card--icon .card,
.card.card--icon {
  --color: var(--color-light);
  --heading-color: var(--color-light);
  --align-items: center;
  gap: var(--s0);
  color: var(--color);
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: center;
  padding: var(--s2) var(--s5);
  font-size: var(--s0);
  line-height: var(--s1);
  text-align: center;
  text-decoration: none;
  background: var(--color-primary-dark-xx);
  border: 1px solid var(--color);
}

.card--icon .card .box,
.card.card--icon .box {
  padding: 0;
}
