.dimentional-carousel{
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    overflow: hidden;
    align-items: center;
    padding: 0.5rem 0;
    position: relative;

    .controls{
        position: absolute;
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;

        i{
            position: relative;
            z-index: 3;
            font-size: 25px;
            padding: 1rem;
            background: var(--accent-color);
            border-radius: 100rem;
            color: var(--main-background);
            opacity: 0.8;
            transition: var(--transition-time);
            cursor: pointer;

            &:hover{
                opacity: 1;
            }
        }
    }


    .carousel-item{
        background: var(--main-background);
        flex-grow: 0;
	    flex-shrink: 0;
        flex-basis: auto;
        position: relative;

        .card{
            width: 300px;
        }

        .box{
            width: 300px;
            height: 450px;
            background: rgb(73, 191, 238);
            border: 2px solid var(--text-color);
        }
    }
}