.quart-card {
  --_bp1: var(--quart-card--bp1, 820);
  --_background: var(--quart-card--background, var(--background, #fff));
  --_text-color: var(--quart-card--text-color, var(--text-color, #000));
  --_heading-color: var(--quart-card--heading-color, var(--heading-color, var(--text-color)));
  --_heading-color-hover: var(--quart-card--heading-color-hover, var(--heading-color, var(--text-color)));
  --_button-color: var(--quart-card--button-color, var(--button-naked-color));
  --_button-color-hover: var(--quart-card--button-color, var(--button-naked-color-hover));
  --_media-aspect-ratio: var(--quart-card--media-aspect-ratio, 16/9);
}

.quart-card__media {
  --_background: var(--quart-card--background, var(--background, #fff));
  --_text-color: var(--quart-card--text-color, var(--heading-color, var(--text-color)));
  --_heading-color: var(--quart-card--heading-color, var(--heading-color, var(--text-color)));
  --_heading-color-hover: var(--quart-card--heading-color-hover, var(--heading-color, var(--text-color)));
}

.quart-card {
  --width-modifier: quart-card--vertical 0 var(--_bp1), quart-card--horisontal var(--_bp1), var(--_custom-width-modifier, width-modifier);
  position: relative;
  background: var(--_background);
  display: grid;
  align-content: var(--_align-content, start);
  text-align: center;
  min-width: 0;
}
.quart-card--horisontal {
  --_align-content: stretch;
  --_content-align-content: center;
  --_content-padding: 64px;
}
.quart-card--horisontal.quart-card--with-media {
  grid-template-columns: 1fr 1fr;
}
.quart-card--without-media {
  padding-bottom: 32px;
}
.quart-card__content {
  padding: var(--_content-padding, 48px 32px);
  display: grid;
  gap: 16px;
  align-content: var(--_content-align-content, start);
  min-width: 0;
}
.quart-card__pre-heading {
  margin-block: 0;
  color: var(--_heading-color);
}
.quart-card__heading {
  margin-block: 0;
  color: var(--_heading-color);
}
.quart-card__heading a {
  text-decoration: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  color: inherit;
}
.quart-card__heading a:hover {
  text-decoration: none;
}
.quart-card__text {
  color: var(--_text-color);
}
.quart-card__text :first-child {
  margin-block-start: 0;
}
.quart-card__text :last-child {
  margin-block-end: 0;
}
.quart-card__media {
  position: relative;
  overflow: clip;
  aspect-ratio: var(--_media-aspect-ratio);
  min-height: 0;
  min-width: 0;
  display: grid;
  place-content: center;
  text-align: center;
  color: var(--_text-color);
  min-height: 0;
  width: 100%;
  height: 100%;
  padding: 48px 32px;
  box-sizing: border-box;
}
.quart-card__media:has(img[src$=".svg"]) {
  --_media-aspect-ratio: auto;
  padding: 48px 32px 0;
}
.quart-card__media * {
  position: revert;
  z-index: 1;
}
.quart-card__media img, .quart-card__media video, .quart-card__media iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-position: center;
  object-fit: cover;
  display: block;
  z-index: 0;
}
.quart-card__media iframe {
  max-width: none;
}
.quart-card__media img[src$=".svg"] {
  position: relative;
  object-fit: contain;
}
.quart-card__button {
  margin: 0;
  text-decoration: none;
  color: var(--_button-color);
  text-align: center;
  transform: translate(0px);
  margin-block-start: 4px;
}
.quart-card__button:hover {
  text-decoration: none;
}
.quart-card__mc1 {
  margin-block: 500px;
}
.quart-card__mc2 {
  margin-block: -500px;
}
.quart-card.lib-big-target-linked:hover {
  cursor: pointer;
  --_button-color: var(--_button-color-hover);
}
.quart-card.lib-big-target-linked:hover .quart-card__button::after {
  transform: translateX(4px);
}