:root{
    --clr-pri-accent: purple;
    --clr-sec-accent: rgb(245, 194, 245);
    --clr-light-white: rgba(255 255 255 / 0.3);
    --clr-transparent: rgba(0 0 0/ 0.5);

    --box-shadow: 0 0 3px var(--clr-transparent);

    --fs-lg: 2rem;
    --fs-xlg: 3rem;

    --dim-xsm: 10px;
    --dim-sm: 20px;
    --dim-lg: 40px;
    --dim-xxlg: 210px;
    
    --edge-gap: 50px;

}
.carousel-container{
    background: linear-gradient(135deg, #000, rgb(94, 3, 91));
    max-width: calc(var(--dim-xxlg) * 4);
    margin: 0 auto 0;
    position: relative;
    height: 400px;
}

.image-carousel-item{
    position: absolute;
    top: 40%;
    background: var(--clr-sec-accent);
    border: 2px solid black;
    height: calc(var(--dim-xxlg) - var(--dim-lg));
    width: calc(var(--dim-xxlg) - var(--dim-lg));
    border-radius: 10px;
    border: none;
    box-shadow: var(--box-shadow);
}

.image-carousel-item img{
    border-radius: 10px;
    height: 100%;
}

.transparent-overlay{
    position: absolute;
    inset: 0;
    background: linear-gradient(var(--clr-transparent), rgb(1, 1, 43));
}

.image-carousel-item.active-image-carousel{
    
    left: 50%;
    height: var(--dim-xxlg);
    width: var(--dim-xxlg);
    transform: translate(-50%, -50%);
    background-color: pink;

    & .transparent-overlay{
        background: none;
    }
}

.image-carousel-item.left-side-image-carousel{
    transform:translate(calc(var(--dim-lg) + var(--edge-gap)), -50%);
}
.image-carousel-item.right-side-image-carousel{
    transform: translate(calc(-100% - var(--dim-lg) - var(--edge-gap)), -50%);
    left: 100%;
}
.navigation-button-container{
    position: absolute;
    inset: 40% 0 auto 0;
    transform: translateY(-50%);
    display: flex;
    justify-content: space-between;
    padding: 5px;
    z-index: 100;
    font-size: clamp(var(--fs-lg), var(--fs-lg) + 0.3vw, var(--fs-xlg));
    
    & > *{
        color: #000;
        background-color: var(--clr-light-white);
        height: var(--dim-lg);
        width: var(--dim-lg);
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 50%;
        cursor: pointer;
    }
}
.go-to-container{
    position: absolute;
    inset: auto 0 10% 0;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;

    & > *{
        height: var(--dim-xsm);
        width: var(--dim-xsm);
        background: linear-gradient(var(--clr-transparent) 40%, var(--clr-light-white));
        border-radius: 50%;
        cursor: pointer;
    }
}

.goToItem.active-goTo{
    background-color: var(--clr-light-white);
    height: var(--dim-sm);
    width: var(--dim-sm);
}
.goToItem:where(.left-side-goTo, .right-side-goTo){
    background-color: var(--clr-sec-accent);
}