.gallery-element{
    position: relative;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;

    margin-left: auto;
    margin-right: auto;
}

.gallery-image-container{
    position: relative;
    width: inherit;
    aspect-ratio: 4/3;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: rgba(0,0,0, 0.05);
    border-radius: 1em;
    overflow: hidden;
}

.gallery-image-container::after{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    aspect-ratio: 4/3;
    box-shadow: inset 0px 0px 10px rgba(0,0,0,0.5);
    border-radius: 1em;
}

.gallery-item-landscape{
    width: 100%;
}

.gallery-item-portrait{
    height: 100%;
}

.gallery-arrow{
    position: absolute;
    /* background-color: rgba(0,0,0, 0.2); */
    width: 20%;
    height: 100%;
    top: 0;
    display: flex;
    justify-content: center;
    cursor: pointer;
}

.gallery-arrow:active{
    outline: none;
    border: none;
}

.gallery-arrow:hover::after{
    background: #888;
    transition: none;
}

.gallery-arrow::after{
    content: '';
    position: absolute;
    width: 25%;
    aspect-ratio: 1;
    top: 47.5%;
    background: rgba(136,136,136, .5);
    mask: url('/src/images/icons/arrow.svg') no-repeat center center;
    -webkit-mask: url('/src/images/icons/arrow.svg') no-repeat center center;

    transition: background 2s 0.5s ease-in-out;
}

.gallery-arrow:hover::after{
    background: rgba(255,255,255,1);
    transition: none;
}

.gallery-prev-button{
    left: 0;
    border-radius: 1em 0 0 1em;
    background: linear-gradient(to right, rgba(0,0,0, 0.2), rgba(0,0,0, 0));
}

.gallery-prev-button:hover{
    background: linear-gradient(to right, rgba(0,0,0, 0.5), rgba(0,0,0, 0));
}

.gallery-next-button{
    right: 0;
    border-radius: 0 1em 1em 0;
    background: linear-gradient(to left, rgba(0,0,0, 0.2), rgba(0,0,0, 0));
}

.gallery-next-button:hover{
    background: linear-gradient(to left, rgba(0,0,0, 0.5), rgba(0,0,0, 0));
}

.gallery-prev-button::after{
    left: 20%;
    transform: rotateZ(-90deg);
}

.gallery-next-button::after{
    right: 20%;
    transform: rotateZ(90deg); 
}