intranet-apei/styles-scripts/index.css

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: "Helvetica", "Arial", sans-serif;
}

h1 {
  text-align: center;
  font-size: 1.7rem;
}
ul.carousel {
  width: 100%;
  height: 300px;
  /*max-height: 500px;*/
  padding: 30px;
  display: flex;
  gap: 4vw;
}
li.carousel {
  list-style-type: none;
  background-color: #eeeeee;
  border: 1px solid #2c54b3;
  padding: 20px;

  flex: 0 0 100%;
}

ul.carousel {
  overflow-x: scroll;
  scroll-snap-type: x mandatory;
}
li.carousel {
  scroll-snap-align: center;
}
ul.carousel::scroll-button(*) {
  border: 0;
  font-size: 2rem;
  background: none;
  color: black;
  opacity: 0.7;
  cursor: pointer;
}

ul.carousel::scroll-button(*):hover,
ul.carousel::scroll-button(*):focus {
  opacity: 1;
}

ul.carousel::scroll-button(*):active {
  translate: 1px 1px;
}

ul.carousel::scroll-button(*):disabled {
  opacity: 0.2;
  cursor: unset;
}
/*
ul::scroll-button(left) {
  content: "◄" / "Previous";
}

ul::scroll-button(right) {
  content: "►" / "Next";
}
  */
ul.carousel {
  anchor-name: --my-carousel;
}

/*
ul::scroll-button(*) {
  position: absolute;
  position-anchor: --my-carousel;
}
ul::scroll-button(left) {
  right: calc(anchor(left) - 70px);
  bottom: calc(anchor(top) + 13px);
}

ul::scroll-button(right) {
  left: calc(anchor(right) - 70px);
  bottom: calc(anchor(top) + 13px);
}
  */
ul.carousel {
  scroll-marker-group: after;
}
ul.carousel::scroll-marker-group {
  position: absolute;
  position-anchor: --my-carousel;
  top: calc(anchor(bottom) - 70px);
  justify-self: anchor-center;

  display: flex;
  justify-content: center;
  gap: 20px;
}
li.carousel::scroll-marker {
  content: attr(data-accName);
  width: 16px;
  height: 16px;
  background-color: transparent;
  border: 2px solid black;
  border-radius: 50%;
  overflow: hidden;
  text-indent: 16px;
}
li.carousel::scroll-marker:target-current {
  background-color: black;
}
ul.carousel img{
    max-width: 360px;
}

ul.carousel {
  overflow-x: auto;
}

/* Chrome / Edge / Safari */
ul.carousel::-webkit-scrollbar {
  height: 0px;
}

/* Firefox */
ul.carousel {
  scrollbar-width: thin;
  scrollbar-color: transparent transparent;
}
div.container {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
}

div.element {
    padding: 5px;
    box-sizing: border-box;
    width: 220px;
    height: 150px;
    border-radius: 5px;
}

div.element img{
    display: block;
    margin: auto;
}

div.element h3{
    text-align: center;
}

li.carousel .carouselContent {
  display: flex;
  align-items: center;
  gap: 20px;
}

li.carousel .carouselContent img {
  height: 150px;
  max-width: 360px;
  object-fit: cover;
}

li.carousel .carouselContent p {
  flex: 1;
}

.nav-link{
  font-size: larger;
}