/* ==========================================================================
Screenshot-Galerie: dreispaltiges Raster gerahmter Bilder, die beim Überfahren
vergrößert in den Vordergrund treten.

Markup:
  <div class="screenshots">
    <img src="…" alt="…" />
    …
  </div>

Die Textausrichtung der umgebenden .sec-body legt die jeweilige Seite fest.
========================================================================== */

.screenshots {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 2vw;
    margin: 2rem 0;

    img {
        width: 100%;
        height: auto;
        border: 0.3em solid #444444;
        border-radius: 0.4em;
        background-color: #222222;
        padding: 0.2em;
        box-shadow: -5px 5px 20px rgba(0, 0, 0, 0.3);
        transition: transform 300ms ease-in-out;
        cursor: pointer;
        aspect-ratio: 16 / 9;

        &:hover {
            transform: scale(1.6);
            position: relative;
            z-index: 20;
        }
    }
}