/* Custom styling for the testimonials carousel shown on the software template.
 * WebAwesome elements use a shadow DOM - generated elements cannot be targeted
 * by CSS selectors. Instead, override the values used by the elements locally.
 */

wa-carousel.software-carousel {
  margin-block: 2ch;
  margin-inline: auto;
  --wa-color-text-quiet: var(--clr-neutral-200);
  --wa-form-control-activated-color: var(--clr-accent-body);
  --wa-space-s: var(--s-1);
  --aspect-ratio: 4 / 3;
  transition: all 300ms;
}

@media (min-width: 960px) {
  wa-carousel.software-carousel {
    --aspect-ratio: 16 / 9;
  }
}

@media (min-width: 1280px) {
  wa-carousel.software-carousel {
    --aspect-ratio: 21 / 9;
  }
}