* {
    --glassInnerOuter: #ffffff30;
    --glassInnerInner: #00000003;
    --glass:
            inset -1px -12px 15px var(--glassInnerInner),
            inset 1px 12px 15px var(--glassInnerInner),
            inset -1px -1px 1px var(--glassInnerOuter),
            inset 1px 1px 1px var(--glassInnerOuter);
}

.image-slider {
    position: relative;
    width: 532px;
    height: auto;
    overflow: hidden;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
@media (min-width: 550px) {
    .image-slider {
        height: 300px;
    }
}

.image-container {
    display: flex;
    transition: transform 0.5s ease;
}

.image-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
@-moz-document url-prefix() {
    .image-container img {
        width: 532px;
    }
}
@media (min-width: 550px) {
    .image-container img {
        height: 300px;
        object-fit: fill;
    }
}

.prev-btn, .next-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: rgba(0, 0, 0, 0.5);
    color: white;
    border: none;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    cursor: pointer;
    z-index: 10;
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    overflow: hidden;
    box-shadow: 0 0 15px #0008, var(--glass);
}

.prev-btn {
    left: 10px;
}

.next-btn {
    right: 10px;
}