.rd-referenzen-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    width: 100%;
}


.image-container {
    width: 100%;
    height: 300px;
    overflow: hidden;
    position: relative;
}


.image-container img {
    display: block;
    width: 100%;
    height: auto;
}

.rd-referenz{border:1px solid #175E17;padding:5px;border-radius:10px;}
.rd-referenz-firma{font-weight:bold;font-size:0.8em;}
.rd-referenz-text{font-size:0.7em;}


/*
 * Tablet
 */
@media (max-width: 980px) {

    .rd-referenzen-grid {
        grid-template-columns: repeat(2, 1fr);
    }

}


/*
 * Smartphone
 */
@media (max-width: 600px) {

    .rd-referenzen-grid {
        grid-template-columns: 1fr;
    }

}
```



.image-container {
            width: 500px;
            height: 300px;

            overflow: hidden;

            position: relative;

            background: #ddd;
            border-radius: 8px;

            box-shadow: 0 5px 20px rgba(0, 0, 0, 0.2);
        }

        /*
         * Das eigentliche Bild
         */
        .image-container img {
            display: block;

            width: 100%;
            height: auto;

            position: absolute;
            top: 0;
            left: 0;

            /*
             * Wichtig:
             * Keine CSS-Transition, da wir die Position
             * per JavaScript kontinuierlich verändern.
             */
            transform: translateY(0);
        }