.content-index{
    height: 100%;
    width: 100%;
    max-width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.gallery-index{
    height:fit-content;
    width:100%;
    max-width: 20%;
    display: flex;
    flex-direction: row;
    align-items: center;
    overflow-x: scroll;
    scroll-snap-type: x mandatory;
    padding-left: 40%;
    padding-right: 40%;
}


.gallery-item{
    height: 40vh;
    width: fit-content;
    margin-right: var(--padding-large);
    border: none;
}


.gallery-item:first-child{

}

.content-index .arrow-container.right{
    right: calc(var(--padding) * -2);
}
.content-index .arrow-container.left{
    left: calc(var(--padding) * -2);
}

.content-index:hover .arrow-container.right{
    right: calc(var(--padding) * 2);
}
.content-index:hover .arrow-container.left{
    left: calc(var(--padding) * 2);
}

@media screen and (orientation: portrait) {
    .gallery-index{
        height:fit-content;
        width:100%;
        max-width: 100%;
        display: flex;
        flex-direction: row;
        align-items: center;
        overflow-x: scroll;
        scroll-snap-type: x mandatory;
        padding-left: 0;
        padding-right: 0;

    }
    .gallery-item{
        scroll-snap-align: center;
        scroll-snap-stop: always;
        height: auto;
        width: 100%;
    }

}