.screenshots-grid img {
    width: 100%;
    height: auto;
    border-radius: 14px;
    transition: transform 0.2s ease;
}

.screenshots-grid .modal-span {
    display: block;
    cursor: pointer;
}

.screenshot-button {
    position: relative;
    width: 100%;
    padding: 0;
    overflow: hidden;
    background: transparent;
    border: 0;
    border-radius: 14px;
    text-align: left;
}

.screenshot-button:focus-visible {
    outline: 3px solid #0d6efd;
    outline-offset: 3px;
}

.screenshots-grid .modal-span:hover img {
    transform: scale(1.01);
}

.screenshot-enlarge {
    position: absolute;
    right: 12px;
    bottom: 12px;
    display: inline-flex;
    gap: 7px;
    align-items: center;
    padding: 7px 11px;
    color: #fff;
    font-size: 0.8rem;
    font-weight: 700;
    line-height: 1;
    background: rgb(17 24 39 / 85%);
    border-radius: 8px;
    pointer-events: none;
}

.screenshot-button:hover .screenshot-enlarge,
.screenshot-button:focus-visible .screenshot-enlarge {
    background: #111827;
}

.screenshot-details {
    padding-top: 14px;
}

.screenshot-caption {
    font-size: 0.95rem;
    color: #6c757d;
    margin-bottom: 10px;
}

.screenshot-item {
    margin: 0 0 28px;
}

.screenshot-item h2 {
    color: #222;
    font-weight: 700;
}

.screenshot-link {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    color: #166534;
    font-size: 0.95rem;
    font-weight: 700;
    text-decoration: none;
}

.screenshot-link:hover {
    color: #14532d;
    text-decoration: underline;
}

#screenshotModal .modal-dialog {
    max-width: 1100px;
}

#screenshotModal .modal-content {
    background: #111;
    border: 0;
}

#screenshotModal .modal-body {
    padding: 0;
    text-align: center;
}

#screenshotModal img {
    width: 100%;
    height: auto;
    border-radius: 8px;
}

#screenshotModal .btn-close {
    filter: invert(1) grayscale(100%);
    opacity: 0.9;
}

#screenshotModal .modal-header {
    border-bottom: 0;
    padding-bottom: 0;
}