@property --image-angle {
  syntax: "<angle>";
  inherits: true;
  initial-value: 0deg;
}
@property --image-fill {
  syntax: "<percentage>";
  inherits: true;
  initial-value: 20%;
}
@keyframes enter {
  from {
    --image-fill: 20%;
  }
  to {
    --image-fill: 95%;
  }
}
.featured-speaker {
  --color-background: var(--neutral-dark);
  --color-text: var(--text-on-neutral-dark);
  --color-subtext: var(--text-on-neutral-dark-primary);
}

.featured-speaker__img {
  --image-angle: 315deg;
  --image-fill: 20%;
  position: relative;
  background: linear-gradient(var(--image-angle), var(--orange) var(--image-fill), transparent var(--image-fill));
  transition: --image-fill 1s;
}
@media (prefers-reduced-motion: reduce) {
  .featured-speaker__img {
    animation-name: none;
    transition: none;
  }
}
.featured-speaker__link:hover .featured-speaker__img {
  --image-fill: 95%;
}
.view-featured-speakers__item:nth-child(odd) .featured-speaker__img {
  background: linear-gradient(var(--image-angle), var(--blue) var(--image-fill), transparent var(--image-fill));
}
.featured-speaker__img img {
  filter: grayscale(1) contrast(180%);
  transition: filter 0.2s;
}
.featured-speaker__img img:hover {
  filter: grayscale(0) contrast(150%);
  opacity: 1;
}
.featured-speaker__img::before {
  content: "";
  position: absolute;
  top: 5%;
  left: 5%;
  width: 6.25rem;
  height: 8.1875rem;
  background: url("../../images/drupal-logo-black.svg") no-repeat center/cover;
}

.featured-speaker__link {
  display: block;
  text-decoration: none;
}

.featured-speaker__badge {
  position: absolute;
  left: 0;
  bottom: 0;
  padding: 0.375rem 0.75rem 0 0;
  background: var(--color-background);
  color: var(--color-subtext);
  text-transform: uppercase;
  font-size: 0.875rem;
  font-weight: bold;
  line-height: var(--sp1-5);
  letter-spacing: 0.08em;
}

.featured-speaker__title {
  margin: var(--sp1-5) 0 var(--sp0-5);
  font-size: 1.25rem;
  font-weight: 700;
  line-height: var(--sp1-5);
  text-align: left;
  color: var(--color-text);
}

.featured-speaker__desc {
  font-size: 0.875rem;
  color: var(--color-subtext);
}
.featured-speaker__desc .text-content {
  font-size: inherit;
  line-height: var(--sp1-5);
}