/* CAROUSEL CARD */
.car-card {
    border-radius: 20px;
    padding: 5px;

    background-color: var(--foreground);
    box-shadow: var(--shadow);
}

/* FLICKITY CAROUSEL */
.flickity-viewport {
    margin-bottom: 25px;

    border-radius: 15px;
    overflow: hidden;
}

.carousel-cell {
    margin-right: 10px;
    height: 500px;

    width: 100%;

    border-radius: 15px;
    overflow: hidden;
}

.carousel-cell div {
    border-radius: 15px;

    width: 100%;
    height: 100%;

    box-shadow: var(--shadow) inset;
    background-size: cover;
    background-position: center;
}

/* FLICKITY BUTTONS */
.flickity-button {
    display: none;
    opacity: 0;

    height: 100%;
    width: 10%;
    border-radius: 0;

    padding: 0;
    margin: 0;

    transition: 0.4s;
}

.flickity-prev-next-button  .flickity-button-icon {
    left: 30%;
    top: 30%;

    width: 40%;
    height: 40%;
}

.flickity-prev-next-button.previous {
    border-top-left-radius: 15px;
    border-bottom-left-radius: 15px;
}

.flickity-prev-next-button.next {
    border-top-right-radius: 15px;
    border-bottom-right-radius: 15px;
}

.flickity-button:hover {
    opacity: 0.5;
}

/* FLICKITY DOTS */
.flickity-page-dots {
    bottom: -20px;
    height: 10px;
}

.flickity-page-dots .dot {
    position: relative;
    bottom: 7px;

    width: 10px;
    height: 10px;
    margin: 0px 10px;

    opacity: 1;
    background-color: var(--background);
    box-shadow: var(--shadow) inset;

    transition: 0.2s;
}

.flickity-page-dots .dot.is-selected {
    background-color: black;
}

/* NON-TOUCH */
body.hasHover .flickity-button:not(:disabled) {
    display: block;
}