@keyframes fadeOutDown {
  from {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
  to {
    opacity: 0;
    transform: translate3d(0, 100%, 0);
  }
}
.column-horizontal {
  display: grid;
}
@media (min-width: 992px) {
  .column-horizontal {
    gap: 3rem;
    text-align: left;
  }
  .column-horizontal:has(> .left):has(> .right).one-third {
    grid-template-columns: 1.5fr 3fr;
  }
  .column-horizontal:has(> .left):has(> .right).one-fourth {
    grid-template-columns: 1fr 3fr;
  }
  .column-horizontal:has(> .left):has(> .right).fifty-fifty {
    grid-template-columns: 1fr 1fr;
  }
  .column-horizontal:has(> .left):has(> .right).two-thirds {
    grid-template-columns: 3fr 1.5fr;
  }
  .column-horizontal:has(> .left):has(> .right).three-fourths {
    grid-template-columns: 3fr 1fr;
  }
}
.column-horizontal .right {
  margin-top: 1.5rem;
}
@media (min-width: 992px) {
  .column-horizontal .right {
    margin-top: 0;
  }
}
.column-items {
  display: grid;
  gap: 3rem;
  list-style-type: none;
  padding: 0;
}
@media (min-width: 992px) {
  .column-items {
    gap: 5rem;
  }
}
.column-items > li > a {
  color: #333333;
}
.column-items > li > a:hover {
  color: #333333;
  text-decoration: none;
}
@media (min-width: 768px) {
  li:nth-child(even) .column-alternate .left {
    order: 1;
  }
}
@media (min-width: 992px) {
  .column .vertically-center {
    align-content: center;
  }
}
@media (min-width: 992px) {
  .column .place-center {
    align-content: center;
  }
}
.column .place-center .column-image {
  aspect-ratio: 1.5/1;
  background-color: #f2f2f2;
  display: grid;
  padding: 2rem;
  place-content: center;
  /*@media (prefers-color-scheme: dark) {
    @content;
  }*/
}
[data-darkreader-scheme=dark] .column .place-center .column-image, html[native-dark-active] .column .place-center .column-image {
  background-color: #333333;
}
.column .place-center .column-image img {
  width: auto;
}
.call-out-banner .column h3 {
  font-weight: 500;
}
.call-out-banner .column p {
  font-size: clamp(1.5rem, 3vw, 1.625rem);
  font-weight: 300;
}
.call-out-banner .column .right:has(h3),
.call-out-banner .column .left:has(h3) {
  padding: 2rem 4rem;
}
/*# sourceMappingURL=layout--viavi-column.css.map */