/* Navigation related breakpoints */
/* Grid related breakpoints */
/* Navigation related breakpoints */
/* Grid related breakpoints */
.card {
  background: var(--color--white);
  transition: scale 0.3s;
  outline: solid 1px transparent;
}
.card:hover, .card:focus-within {
  scale: 1.015;
}
@media (prefers-reduced-motion: reduce) {
  .card:hover, .card:focus-within {
    scale: revert;
  }
}
.card:focus-within:has(:focus-visible) {
  outline: solid 2px currentColor;
  outline-offset: 2px;
}
.card a {
  text-decoration: none;
  color: var(--color--gray-5);
}

.card__video-wrapper {
  position: relative;
}
.card__video-wrapper:after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 4.375rem;
  height: 3.125rem;
  background-image: url("../../icons/youtube-play.svg");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

.card__content {
  padding-block: var(--sp2) var(--sp3);
}
[class*=u-theme] .card__content {
  padding: var(--sp2);
}

.card__title {
  font-size: 1.25rem;
  margin-bottom: var(--sp1);
  color: var(--color--gray-5);
}

.card__detail .field--name-field-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp0-25);
  font-size: 0.875rem;
  text-transform: uppercase;
}
.card__detail .field--name-field-tags .field__item {
  display: inline-block;
  padding: 2px 0.625rem;
  background: #f5f5f5;
  border-radius: 0.1875rem;
}