@layer components {

  ul.homeImages img {
    max-width: min(100%, var(--max-width));
  }

  ul.homeImages {
    list-style: none;
    max-width: min(100%, var(--max-width));
    margin: 20px 20px 0 20px;
    padding: 0;
    border-radius: var(--radius-md);
    display: flex;
    gap: 4vw;
    overflow-x: scroll;
    scroll-snap-type: x mandatory;
  }

  ul.homeImages > li {
    list-style-type: none;
    flex: 0 0 100%;
    padding: 0;
    max-width: min(100%, var(--max-width));
    scroll-snap-align: center;
    text-align: center;
  }

  ul.carousel > li figcaption {
    &::after {
      content: "►";
    }
    &::before {
      content: "◄";
    }
  }
  ul.homeImages > li figcaption::before, 
  ul.homeImages > li figcaption::after {
    margin: 0 var(--space-md);
    color: var(--color-caption);
  }
}