@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200');

.container {
    width: 900px;
    /* margin: 10px auto; */
}

.carousel {
    /* border: 2px;
    border-style: solid;
    border-color: #cccccc; */
    height: 100%;
    position: relative;
    overflow: hidden; /* <-- This hide the containers not in display*/
}

.slider1 {
    display: flex;
    flex-direction: column;
    height: 100%;
    /* width: 4500px; */
    width: 3600px;
    /* border: 1px;
    border-style: dashed;
    border-color: red; */
    transition: all 0.3s;
}

    .slider1 section {
        flex-basis: 100%;
        flex-direction: column;
        /* justify-content: center; */
        /* align-items: center; */
        display: flex;
    }

.slider2 {
    display: flex;
    flex-direction: row;
    height: 100%;
    width: 3600px;
    /* border: 1px;
    border-style: dashed;
    border-color: red; */
    transition: all 0.3s;
}
    .slider2 section {
        flex-basis: 100%;
        flex-direction: column;
        /* justify-content: center; */
        /* align-items: center; */
        display: flex;
    }

.controls .arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%); /* <-- This align the arrows */
    cursor: pointer;
    /* font-size: 30px; */
    /* font-weight: bolder; */
    /* color: #0d5924; */
    /* color: #696969; */
    color: #96e95e;
}

.arrow.left {
    top: 200px;
    left: 10px;
}

.arrow.right {
    top: 200px;
    right: 10px;
}

.material-symbols-outlined {
    font-size: 100px;
    font-variation-settings:
    'FILL' 0,
    'wght' 700,
    'GRAD' 0,
    'opsz' 48
}