* {
    box-sizing: border-box;
}

html,
body {
    width: 100%;
    height: 100%;
    margin: 0;
}

body {
    background: #111;
    color: white;
    font-family: sans-serif;
}

.slider {
    position: relative;

    width: 100%;
    height: 100vh;

    display: flex;
    align-items: center;
    justify-content: center;
}

.image-container {
    width: 100%;
    height: 100%;

    display: flex;
    align-items: center;
    justify-content: center;
}

.image-container img {
    display: block;

    max-width: 100%;
    max-height: 100%;

    object-fit: contain;
}

.slider-button {
    position: fixed;
    top: 50%;
    transform: translateY(-50%);

    z-index: 10;

    width: 60px;
    height: 100px;

    border: 0;
    border-radius: 8px;

    background: rgba(0, 0, 0, 0.4);
    color: white;

    font-size: 40px;

    cursor: pointer;

    transition: background 0.2s;
}

.slider-button:hover {
    background: rgba(0, 0, 0, 0.7);
}

.prev {
    left: 20px;
}

.next {
    right: 20px;
}

.counter {
    position: fixed;
    bottom: 20px;
    left: 50%;

    transform: translateX(-50%);

    padding: 6px 12px;

    background: rgba(0, 0, 0, 0.5);
    border-radius: 5px;

    font-size: 14px;
}