.screenshot-carousel {
    width: 900px;
    max-width: 100%;
    margin: 0 auto;

    display: grid;
    grid-template-columns: 60px minmax(0, 1fr) 60px;
    gap: 15px;
    align-items: center;
}

.carousel-image-frame {
    width: 100%;
    height: 500px;

    overflow: hidden;
    background: #000;

    border: 3px solid #c9a24a;

    box-shadow:
        0 0 14px rgba(201,162,74,.55),
        0 0 24px rgba(0,0,0,.6);

    box-sizing: border-box;
}


.carousel-image-frame img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    cursor: pointer;
}

.carousel-arrow {
    
    width: 60px;
    height: 60px;
    box-sizing: border-box;

    border: 2px solid #c9a24a;

    background:
        linear-gradient(
            to bottom,
            #7b1616,
            #4f0f0f
        );

    color: #f3d68a;

    font-size: 32px;

    cursor: pointer;

    transition: .2s;
}

.carousel-arrow:hover {
    background:
        linear-gradient(
            to bottom,
            #a31f1f,
            #661313
        );

    box-shadow:
        0 0 10px rgba(201,162,74,.5);
}

.image-modal {
    display: none;

    position: fixed;

    top: 0;
    left: 0;

    width: 100%;
    height: 100%;

    background: rgba(0,0,0,.9);

    z-index: 9999;

    justify-content: center;
    align-items: center;
}

.image-modal img {
    max-width: 100%;
    max-height: 100%;

    border: 3px solid #c9a24a;

    box-shadow:
        0 0 25px rgba(0,0,0,.7);
}

#closeModal {
    position: absolute;

    top: 20px;
    right: 35px;

    font-size: 48px;

    color: #f3d68a;

    cursor: pointer;
}

#closeModal:hover {
    color: white;
}

.modal-arrow {
    position: absolute;

    width: 70px;
    height: 70px;

    border: 2px solid #c9a24a;

    background:
        linear-gradient(
            to bottom,
            rgba(123,22,22,.9),
            rgba(79,15,15,.9)
        );

    color: #f3d68a;

    font-size: 36px;

    cursor: pointer;

    z-index: 10000;
}

.modal-arrow:hover {
    background:
        linear-gradient(
            to bottom,
            #a31f1f,
            #661313
        );

    box-shadow:
        0 0 12px rgba(201,162,74,.6);
}

#modalPrev {
    left: 25px;
}

#modalNext {
    right: 25px;
}