/**
 * Do not edit directly, this file was auto-generated.
 */
@layer jokul.components {
  .jkl-card {
    --padding-s: var(--jkl-unit-05);
    --padding-m: var(--jkl-unit-15);
    --padding-l: var(--jkl-unit-20);
    --padding-xl: var(--jkl-unit-30);
    --border-radius: var(--jkl-border-radius-m);
    --border-color: transparent;
    --border-width: 0.0625rem;
    --background-color: transparent;
    position: relative;
    overflow: hidden;
    display: block;
    background-color: var(--background-color);
    border-radius: var(--border-radius);
    box-sizing: border-box;
    padding: var(--padding, var(--padding-s));
    text-decoration: none;
    color: var(--jkl-color-text-default);
  }
  .jkl-card::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    border-radius: var(--border-radius);
    border: var(--border-width) solid var(--border-color);
    transition-timing-function: ease;
    transition-duration: 100ms;
    transition-property: border-color, border-size;
  }
  @media (min-width: 680px) {
    .jkl-card {
      --padding-s: var(--jkl-unit-10);
      --padding-m: var(--jkl-unit-20);
      --padding-l: var(--jkl-unit-30);
      --padding-xl: var(--jkl-unit-40);
    }
  }
  .jkl-card[data-padding=s] {
    --padding: var(--padding-s);
  }
  .jkl-card[data-padding=m] {
    --padding: var(--padding-m);
  }
  .jkl-card[data-padding=l] {
    --padding: var(--padding-l);
  }
  .jkl-card[data-padding=xl] {
    --padding: var(--padding-xl);
  }
  .jkl-card--high {
    --background-color: var(--jkl-color-background-container-high);
  }
  .jkl-card--low {
    --background-color: var(--jkl-color-background-container-low);
  }
  .jkl-card--outlined {
    --border-color: var(--jkl-color-border-separator);
  }
  .jkl-card[data-clickable=true] {
    cursor: pointer;
  }
  .jkl-card[data-clickable=true]:hover {
    --border-color: var(--jkl-color-border-separator-hover);
    --border-width: 0.125rem;
  }
  .jkl-card[data-clickable=true]:focus-visible {
    outline: 3px solid var(--jkl-color-border-action);
    outline-offset: 3px;
  }
  .jkl-card-image {
    --margin: calc(var(--padding, 0) * -1);
    width: calc(100% + 2 * var(--padding, 0));
    aspect-ratio: var(--image-aspect-ratio, 3/2);
    margin-inline: var(--margin, 0);
    object-fit: cover;
  }
  .jkl-card-image--top {
    margin-top: var(--margin, 0);
  }
  .jkl-card-image--bottom {
    margin-bottom: var(--margin, 0);
  }
  .jkl-card-image--full {
    margin-block: var(--margin, 0);
  }
}