.seehotel-triplet {
    position: relative;
    overflow: hidden; /* damit das Pseudo-Element nicht überläuft */
}

.seehotel-triplet::after {
    position: absolute;
    content: '';
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 0;
    background-image: url('background.svg');
    background-repeat: no-repeat;
    background-position: center bottom;
    background-size: cover;
    height: 50%;
    width: 100%;
}

/* ================
   Grid-Container
   ================ */
.seehotel-triplet-images {
    --right-col: 632px; /* Breite der rechten Spalte -> an dein Design anpassen */
    --gap: 48px; /* Abstand zwischen Kacheln */
    display: grid;
    grid-template-columns: 1fr var(--right-col);
    grid-auto-rows: auto;
    gap: var(--gap);
    align-items: start;
    position: relative;
    z-index: 1; /* über dem Hintergrund-Pseudo-Element */
}

/* Basis für jedes Item */
.seehotel-triplet-image {
    position: relative; /* nötig für Overlay-Positionierung */
    margin: 0;
}

/* Bilder sauber darstellen */
.seehotel-triplet-image img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: cover;
    /* Optional: gleiche Proportionen erzwingen:
    aspect-ratio: 4 / 3;
    object-fit: cover; */
}

/* Letztes Grid-Item (dein rechtes Bild) explizit platzieren */
.seehotel-triplet-images > .seehotel-triplet-image:last-child {
    grid-column: 2; /* rechte Spalte */
    grid-row: 1 / span 2; /* über zwei Reihen */
    align-self: center; /* vertikale Mitte zwischen den beiden linken Bildern */
}

/* Erstes Bild volle Breite, die anderen beschränkt auf 632px */
.seehotel-triplet-images > .seehotel-triplet-image:not(:first-child) {
    margin-left: auto;
}

.seehotel-triplet-images > .seehotel-triplet-image:not(:first-child) img:not(.image-caption) {
    max-height: 632px;
    max-width: 632px;
    aspect-ratio: 1 / 1;
    object-position: bottom;
}

/* Overlay-Bild (Beschriftung) */
.seehotel-triplet-image--with-caption .image-caption {
    position: static;
    display: block;
    margin-top: -35%;
    margin-left: -32px;
    width: 100%;
    object-fit: contain; /* damit der Schriftzug nicht beschnitten wird */
    pointer-events: none; /* Klicks gehen zum darunterliegenden Bild */
}

/* Variante: lieber unten „aufsitzen“ lassen statt full-bleed */
.seehotel-triplet-image--with-caption .image-caption.is-bottom {
    inset: auto 0 0 0; /* nur am unteren Rand */
    height: auto;
}

/* Responsiv: unter ~1200px auf 1 Spalte stacken */

@media (max-width: 1200px) {
    .seehotel-triplet-images {
        grid-template-columns: 1fr;
    }

    .seehotel-triplet-images > .seehotel-triplet-image:last-child {
        grid-column: 1; /* wieder in die einzige Spalte */
        grid-row: auto;
        align-self: stretch;
    }

    .seehotel-triplet-images > .seehotel-triplet-image:not(:first-child) {
        margin-left: 0;
    }

    .seehotel-triplet-images > .seehotel-triplet-image:not(:first-child) img:not(.image-caption) {
        max-width: 100%;
        object-position: top;
    }
}

@media (max-width: 800px) {
    .seehotel-triplet-image--with-caption .image-caption {
        margin-left: 0;
    }
}