.gallery-container {
    display: flex;
    flex-wrap: nowrap;
    place-content: center center;
    gap: 0px;
    overflow-x: auto;
    overflow-y: hidden;

    max-width: 100%;
    scrollbar-width: none;
    vertical-align: center;
}

.gallery-container::-webkit-scrollbar {
    display: none;
  }

/* Shared item style */
.gallery-item {
    --transition-duration: 500ms;
    --transition-function: cubic-bezier(0.4,0,0.1,1);
    --transition-delay: 0;

    scroll-snap-align: center;
    scroll-snap-stop: always;

    height: 600px;

    transition-duration: var(--transition-duration);
    transition-timing-function: var(--transition-function);
    transition-delay: var(--transition-delay);

    overflow: hidden;
    border-radius: 80px;

    position: relative;

    border-width: 4px;
    border-style: solid;
    border-color: white;
}

@media only screen and (min-width: 1200px)  {
    /* Unfocused item style */
    .gallery-item {
        width: 160px;
        flex-shrink: 0;
    }

    /* Focused item style */
    .gallery-item:hover {
        width: 360px;
    }

    .gallery-item .gallery-item-content {
        top: 40px;
        right: 40px;
        font-size: 36px;
    }
}


@media only screen and (max-width: 1200px) and (min-width: 600px)  {
    /* Unfocused item style */
    .gallery-item {
        border-radius: 16px;
        border-width: 2px;
        flex-shrink: 1;
    }

    .gallery-item {
        height: calc(100dvh - 64px);
    }
}

@media only screen and (max-width: 600px) {
    .gallery-container {
        flex-flow: column nowrap;
        width: 100%;
        height: 100%;
        box-sizing: border-box;
        padding: 4px;
        background-color: rgb(10, 10, 10);
    }

    /* Unfocused item style */
    .gallery-item {
        border-color: rgb(10, 10, 10);
        border-radius: 16px;
        border-width: 2px;
        flex-shrink: 1;
    }
}

.gallery-item .gallery-item-content {
    color: white;

    position: absolute;

    word-break: keep-all;

    transition-duration: var(--transition-duration);
    transition-timing-function: var(--transition-function);

    display: none;
}


.gallery-item .gallery-item-content {
    opacity: 0.0;
}

.gallery-item:hover .gallery-item-content {
    opacity: 1.0;
}

/* Background image */
.gallery-item-background {
    min-width: 100%;
    height: 100%;
    object-fit: cover;

    transition-duration: var(--transition-duration);
    transition-timing-function: var(--transition-function);
    transition-delay: var(--transition-delay);
    user-select: none;
}

/* Unfocused item style */
.gallery-item .gallery-item-background {
    filter: grayscale(0.3) brightness(1.1);
}

/* Focused item style */
.gallery-item:hover .gallery-item-background {
    filter: grayscale(0) brightness(1);
}

.gallery-item .gallery-item-entry {
    display: none;
    
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}

.gallery-item:hover .gallery-item-entry {
    display: block;
}