/*

- Add icon variables here, f.e.

$icon-check: '<svg width="18" height="18" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M7 11.2 3.4 7.6 2 9l5 5 9-9-1.4-1.4z" fill="currentColor"/></svg>';


- This variables can be used like this:

.className {
  background-image: background-icon($icon-check, $primary-color-1);
}

*/
/*

- Add icon variables here, f.e.

$icon-check: '<svg width="18" height="18" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M7 11.2 3.4 7.6 2 9l5 5 9-9-1.4-1.4z" fill="currentColor"/></svg>';


- This variables can be used like this:

.className {
  background-image: background-icon($icon-check, $primary-color-1);
}

*/
@property --degree {
  syntax: "<angle>";
  inherits: false;
  initial-value: 335deg;
}
.snk-cards_teaser .snk-card {
  align-items: flex-start;
  border: 2px solid #15178c;
  padding: 2rem;
  position: relative;
}
@media (min-width: 768px) {
  .snk-cards_teaser .snk-card {
    min-height: 414px;
  }
}
@supports (-webkit-touch-callout: none) or (background: -webkit-named-image(i)) or (-moz-appearance: none) {
  .snk-cards_teaser .snk-card {
    transition: border-color 0.3s ease-out;
  }
  .snk-cards_teaser .snk-card::after, .snk-cards_teaser .snk-card::before {
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 1;
    background: linear-gradient(335deg, rgba(184, 194, 255, 0.82) -48.1%, rgba(21, 23, 140, 0.82) 53.31%);
    transition: opacity 0.3s ease-out;
  }
  .snk-cards_teaser .snk-card::after {
    z-index: 2;
    background: linear-gradient(305deg, rgba(184, 194, 255, 0.82) -48.1%, rgba(21, 23, 140, 0.82) 53.31%);
    opacity: 0;
  }
}
@supports (not (background: -webkit-named-image(i))) and (not (-moz-appearance: none)) {
  .snk-cards_teaser .snk-card {
    --degree: 335deg; /*  needed for newer firefox to have a valid output */
    transition: --degree 0.3s ease-out, border-color 0.3s ease-out;
    background: linear-gradient(var(--degree), rgba(184, 194, 255, 0.82) -48.1%, rgba(21, 23, 140, 0.82) 53.31%);
  }
}
.snk-cards_teaser .snk-card:hover {
  border-color: #00ffa2;
}
@supports (-webkit-touch-callout: none) or (background: -webkit-named-image(i)) or (-moz-appearance: none) {
  .snk-cards_teaser .snk-card:hover::after {
    opacity: 1;
  }
}
@supports (not (background: -webkit-named-image(i))) and (not (-moz-appearance: none)) {
  .snk-cards_teaser .snk-card:hover {
    --degree: 305deg;
  }
}
.snk-cards_teaser .snk-card-content {
  z-index: 3;
}
.snk-cards_teaser .snk-card-content img {
  height: 6.25rem;
  max-width: 6.25rem;
  min-width: 6.25rem;
  object-fit: contain;
  object-position: left center;
  margin-bottom: 1.6875rem;
}
@media (min-width: 576px) {
  .snk-cards_teaser .snk-card-text {
    margin-bottom: 2rem;
  }
}
@media (min-width: 576px) {
  .snk-cards_teaser .snk-card .snk-buttons {
    margin-top: auto;
  }
}
.snk-cards_teaser .snk-card .snk-btn-link {
  pointer-events: none;
}