@keyframes fadeOutDown {
  from {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
  to {
    opacity: 0;
    transform: translate3d(0, 100%, 0);
  }
}
.cards:not(.grid-banners) a:hover .card:not(.label):not(.image-top) {
  filter: brightness(1.07);
}
.cards a:hover {
  text-decoration: none;
}
.cards a:hover .card {
  transform: translate3d(0, -5px, 0);
}
.cards .card {
  height: 100%;
  position: relative;
  transition: all 0.3s ease;
}
.cards .card-items {
  display: grid;
  justify-content: center;
  list-style: none;
  gap: 2rem;
  padding: 0;
}
.cards .card-items:not(.body-narrow) {
  margin: 0;
}
.cards .card.image-top {
  text-align: center;
}
.cards .card.image-top .card-image {
  display: grid;
  justify-content: center;
  padding-bottom: 2rem;
}
.cards .card.image-top .card-image img {
  aspect-ratio: 4/3;
  object-fit: contain;
  max-width: 13.75rem;
}
.cards .card.image-top .card-body h3 {
  font-size: clamp(1.5rem, 3vw, 1.625rem);
  font-weight: 300;
}
.cards .label {
  align-content: flex-end;
  display: grid;
  padding: 3rem 1rem 1rem;
}
.cards .label .card-title {
  align-items: flex-end;
  color: #333333;
  display: flex;
  justify-content: space-between;
  font-size: clamp(1.3125rem, 3vw, 1.5rem);
}
.cards .label .card-title:after {
  content: "\f054";
  font-family: "viavi-icons";
  font-size: 1.25rem;
  padding-left: 1rem;
  transition: transform 0.3s ease;
}
@media (min-width: 768px) {
  .cards .col-two {
    grid-template-columns: repeat(auto-fill, minmax(24rem, 1fr));
  }
}
@media (min-width: 768px) {
  .cards .col-three {
    grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr));
  }
}
@media (min-width: 768px) {
  .cards .col-four {
    grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr));
  }
}
@media (min-width: 768px) {
  .cards .col-four.body-narrow {
    grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
  }
}
.cards ul:has(.bb-multi-color) li:nth-child(4n+1) .card {
  box-shadow: 0 0.5rem 0 #491e88;
}
.cards ul:has(.bb-multi-color) li:nth-child(4n+2) .card {
  box-shadow: 0 0.5rem 0 #0070b8;
}
.cards ul:has(.bb-multi-color) li:nth-child(4n+3) .card {
  box-shadow: 0 0.5rem 0 #00a9e0;
}
.cards ul:has(.bb-multi-color) li:nth-child(4n+4) .card {
  box-shadow: 0 0.5rem 0 #00b0a2;
}
.cards ul:has(.bb-multi-color) .label {
  border: solid #dbdbdb;
  border-width: 0.125rem 0.125rem 0 0.125rem;
  /*@media (prefers-color-scheme: dark) {
    @content;
  }*/
}
[data-darkreader-scheme=dark] .cards ul:has(.bb-multi-color) .label, html[native-dark-active] .cards ul:has(.bb-multi-color) .label {
  border: solid #333333;
}
.cards.products ul {
  display: grid;
  gap: 2rem;
  list-style-type: none;
}

section.products.cards {
  margin-bottom: 7rem;
}

.ref-product .card-image {
  padding: 2rem;
}
.ref-product .card-image img {
  max-width: 280px;
}

.card-border {
  padding: 2rem;
  border: 2px solid #dbdbdb;
}
.card-date {
  display: block;
  margin-bottom: 0.375rem;
  text-transform: uppercase;
  font-size: 0.875rem;
  font-weight: bold;
  line-height: 1.5rem;
}
.view-search-api-webinars .card-date {
  margin-bottom: 1rem;
}
.card-title {
  font-size: clamp(1.5rem, 3vw, 1.625rem);
  font-weight: 400;
  margin-bottom: 0;
}
/*# sourceMappingURL=layout--viavi-card.css.map */
