.section-carousel-inst {
    position: relative;
}

.carousel-card-placeholder {
    position: absolute;
    right: 5vw;
    bottom: 10vh;
}

.section-carousel-inst .carousel:not(.no-swipe) .carousel-container-content:hover {
    cursor: default; 
}

.section-carousel-inst .carousel .carousel-container {
    width: 100vw;
    height: calc(92vh - var(--header-size));
    overflow: hidden;
}

.section-carousel-inst .carousel--animatable {
    -webkit-transition: none;
    -o-transition: none;
    transition: none;
}

.section-carousel-inst .carousel .carousel-dots-container {
    position: absolute;
    bottom: calc(10vh - var(--space-base));
    left: 5vw;
}

.section-carousel-inst .carousel .carousel-dots-container .carousel-dot:nth-child(1) {
    margin-left: 0;
}

.section-carousel-inst .carousel .carousel-dots-container .carousel-dot.active {
    background-color: var(--color-white);
}

.section-carousel-inst .carousel .carousel-dots-container .carousel-dot {
    background-color: transparent;
    height: 16px;
    margin: 0 var(--space-s);
    width: 16px;
    border: 2px solid var(--color-white);   
}

.phone .section-carousel-inst .carousel .carousel-dots-container {
    bottom: 4vh;
    left: 2rem;
}

.section-carousel-inst .placeholder-icon {
    display: flex;
    justify-content: center;
}

.desktop .section-carousel-inst .placeholder-icon {
    display: flex;
    position: absolute;
    left: 50%;
    bottom: 3vh;
    font-size: 24px;
    color: var(--color-grey5);
}

/* responsive */

.phone .carousel-card-placeholder,
.tablet .carousel-card-placeholder {
    position: relative;
    right: unset;
    bottom: unset;
}

/* Removing draggable event */

/*we need pointer-events for link inside carousel

 .desktop .section-carousel-inst .carousel {
    pointer-events: none;
}

.desktop .section-carousel-inst .carousel .carousel-dots-container {
    pointer-events: initial;
} */