Hallo Günter,

sorry, dass ich jetzt länger keine Zeit zum antworten hatte.

Nein. Die Breite muss aus den .card divs kommen. Diese divs könnten - meine ich - auch gerne article Elemente sein, und deine scrolling-wrapper könnten section Elemente sein. Das scheint mir semantisch am passendsten. Ich würde das so machen:

(1) Entferne aus der Regel für .scrolling-wrapper die drei grid-Eigenschaften. Verwende statt dessen

.scrolling-wrapper {
  display:flex;
  gap: 1em;
  ...
}

(2) Entferne in der Monsterregel die Liste aller IDs. Die Elemente mit diesen IDs sind alles Cards, und mir scheint, als würden diese IDs nirgends verwendet als in dieser Regel. Alle Cards haben aber auch die .card Klasse, also kannst Du das, was da drin steht, auch in die .card Regel übertragen. Ergänze für die .card Regel dann noch flex: 0 0 17em; - oder so, die 17em sind die Basisbreite ("flex-basis") für die Flexitems der Flexbox, zu der Schritt 1 den Scrolling-Wrapper gemacht hat. Die beiden Nullen (flex-grow und flex-shrink) bewirken, dass die Elemente diese Basisbreite auch behalten, wenn die Flexbox breiter oder schmaler ist als die Summe der Breiten ihrer Kinder.

Also:

.card {
    border-radius: 1em;    /* einmal 1em reicht, das gilt für alle Ecken */
    border: 5px outset;
    padding: 0.5em;
    background: #dddd00;
}

display:inline-block ist in einer Flexbox unnötig (im Grid auch), und der Margin wird durch die gap-Angabe im scrolling-wrapper ersetzt.

(3) Entferne aus den h2 die Unterstriche. Gib den h2 ein border-bottom: 2px solid black und ein text-align: center. Oder hast Du andere Vorstellungen von der Unterstreichung?

(4) Es scheint, als wolltest Du die Bilder und die Jahresangabe etwas schmaler haben als den Text darunter. Dazu hatte ich ja schon figure und figcaption erwähnt, das figure-Element kann ein Padding bekommen, womit die Bilder und die Caption darunter etwas schmaler werden.

Hast Du deine Änderungen schon in einer Testgalerie online? Vermutlich müsste man da iterativ noch weiter drüber…

Rolf