.carousel-container {
  margin: 0 auto;
  position: relative;
  background: #f8f8f8;
  transition: background-color .3s ease-in-out;

  .carousel-content {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    gap: 8px;
    -ms-overflow-style: none;  /* Internet Explorer 10+ */
    scrollbar-width: none;  /* Firefox */
    box-shadow: var(--box-shadow);

    &::-webkit-scrollbar {
      display: none;  /* Safari and Chrome */
    }

    .carousel-item {
      flex: 0 0 100%;
      display: flex;
      scroll-snap-align: start;
      background-color: white;
      border-radius: 7px;
      box-shadow: var(--box-shadow);
      color: var(--text-color);

      &:hover {
        cursor: pointer;
        background-color: color-mix(in srgb, white, black 5%);
      }

      .item-image {
        display: flex;
        align-items: center;
        flex: 1;
        width: 35%;

        img {
          width: 100%;
          border-radius: 7px;
          aspect-ratio: 500 / 385;
        }
      }

      .item-description {
        display: flex;
        flex-direction: column;
        flex: 2;
        gap: 2px;
        padding: 12px;

        .description-title {
          font-weight: bold;
          margin: 0;
          color: var(--text-color);

          a {
            text-decoration: none;
            font-family: var(--header-font-family);

            &:hover,
            &:focus,
            &:active {
              color: var(--text-color);
            }
          }
        }

        .description-excerpt {
          color: var(--text-color);
          margin: 0;
          -webkit-line-clamp: 3;
          -webkit-box-orient: vertical;
          text-overflow: ellipsis;
          display: -webkit-box;
          overflow: hidden;
          font-family: var(--general-font-family);

          @media (min-width: 768px) and (max-width: 1024px), (max-width: 567px) {
            -webkit-line-clamp: 2;
          }
        }

        .description-read-more {
          /* color: var(--sorties-color); */
          display: inline-block;
          margin: auto 0 0 0;
          font-family: var(--general-font-family);
        }
      }
    }
  }

  @media only screen and (min-width: 768px) {
    .carousel-content {
      gap: 16px;

      .carousel-item {
        .item-description {
          padding: 16px;

          .description-excerpt {
            -webkit-line-clamp: 4;
          }
        }
      }
    }
  }
}


.petitweb-carousel-item a {
  display: flex;
  gap: 10px;
  text-decoration: none;
  color: inherit;
  width: 100%;
  padding: .5rem;
}

.petitweb-carousel-dots {
  text-align: center;
}

.dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  background: #ccc;
  border-radius: 50%;
  margin: 0 4px;
  cursor: pointer;
}

.dot.active {
  background: #666;
}