.carousel {
    position: relative;
    width: 100%;
    margin: auto;
    overflow: hidden;
}

.carousel-track {
    display: flex;
    transition: transform 0.5s ease;
    height: 100%;
}

.carousel img {
    flex-shrink: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* Arrows */
.carousel button {
    all: unset;
    /* reset weird defaults */
    border-radius : 10%;
    cursor: pointer;
}

.carousel .prev {
    left: 10px;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: rgba(50, 50, 50, 0.5);
    color : white;
    border: none;
    font-size: 2rem;
    padding: 0.5rem 1rem;
    cursor: pointer;
    z-index: 10;
}

.carousel .next {
    right: 10px;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: rgba(50, 50, 50, 0.5);
    color : white;
    border: none;
    font-size: 2rem;
    padding: 0.5rem 1rem;
    cursor: pointer;
    z-index: 10;
}

/* Dots */
.carousel-dots {
    position: absolute;
    bottom: 10px;
    width: 100%;
    display: flex;
    justify-content: center;
    gap: 8px;
}

.carousel-dots button {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: none;
    background: #ccc;
    cursor: pointer;
    padding: 0;
}

.carousel-dots button.active {
    background: #333;
}