/* Trinity category campaign carousel: original flat banner treatment, two-up on desktop. */
@media (min-width: 768px) {
  #homepageCarousel {
    margin: 1.25rem 0 1.75rem;
    overflow: hidden;
  }

  #homepageCarousel .carousel-inner {
    display: flex;
    gap: 1rem;
    overflow: visible;
    padding: 0;
  }

  #homepageCarousel .carousel-item,
  #homepageCarousel.trinity-campaign-rail .carousel-item {
    display: block;
    flex: 0 0 calc((100% - 1rem) / 2);
    aspect-ratio: 1920 / 856;
    margin: 0;
    overflow: hidden;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }

  #homepageCarousel .trinity-campaign-link {
    display: block;
    width: 100%;
    height: 100%;
  }

  #homepageCarousel .trinity-campaign-image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    padding: 0;
    background: var(--td-paper-dark, #f3efe4);
  }

  #homepageCarousel .carousel-control-prev,
  #homepageCarousel .carousel-control-next {
    top: 0;
    bottom: 0;
    width: 10%;
    height: auto;
    transform: none;
    border-radius: 0;
    opacity: .72;
  }

  #homepageCarousel .carousel-control-prev {
    left: 0;
    background: linear-gradient(90deg, rgba(23, 23, 20, .45), transparent);
  }

  #homepageCarousel .carousel-control-next {
    right: 0;
    background: linear-gradient(270deg, rgba(23, 23, 20, .45), transparent);
  }

  #homepageCarousel .carousel-control-prev:hover,
  #homepageCarousel .carousel-control-next:hover,
  #homepageCarousel .carousel-control-prev:focus,
  #homepageCarousel .carousel-control-next:focus {
    opacity: 1;
  }
}

@media (max-width: 767.98px) {
  #homepageCarousel .carousel-item {
    aspect-ratio: 1920 / 856;
    border: 0;
    border-radius: 0;
    background: var(--td-paper-dark, #f3efe4);
    box-shadow: none;
  }

  #homepageCarousel .trinity-campaign-link {
    display: block;
    width: 100%;
    height: 100%;
  }

  #homepageCarousel .trinity-campaign-image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    padding: 0;
    background: var(--td-paper-dark, #f3efe4);
  }
}