.kollektionen .grid {
    margin-left: 0;
    display: grid;
    grid-auto-columns: auto;
    grid-template-areas:
        "text text"
        "image image-two"
}

.kollektionen .grid p {
    grid-row: text / text;
    grid-column: 1 / 3;
    z-index: 2;
    background-color: #FDFDFC;
    text-align: left;
    margin-left: 1.5rem;
}

.kollektionen .grid .middle-img {
    grid-column: 1 / 2;
    grid-row: image / image;
    margin-left: 1.5rem;
    /* object-fit: cover; */
    z-index: 1;
}

.kollektionen .grid .right-img {
    grid-column: 2 / 3;
    grid-row: image / image;
    width: 95%;
    margin-top: auto;
    margin-bottom: auto; 
    /* margin-right: auto;
    margin-left: 0px;
    object-fit: scale-down;
    */

}

@media (min-width: 768px) and (min-device-width : 768px) {
    .kollektionen .grid {
        margin-left: 25px;
        grid-auto-rows: 300px;
        grid-auto-columns: 1fr;
        align-items: center;
        grid-template-areas:
            "background background background"
            "text image image-two"
            "background-two background-two background-two";
    }

    .kollektionen .grid p {
        grid-row: background-start / background-two-end;
        grid-column: 1 / 3;
        z-index: 2;
        background-color: #FDFDFC;
        vertical-align: center;
        padding: 1rem;
        height: 50%;
        width: 50%;
        margin-left: 7rem;
    }

    .kollektionen .grid .middle-img {
        grid-column: 2 / 2;
        grid-row: background-start / background-two-end;
        height: 100%;
        width: 100%;
        object-fit: cover;
        z-index: 1;
    }

    .kollektionen .grid .right-img {
        height: 60%;
        grid-column: 3 / 4;
        margin-right: auto;
        margin-left: 0px;
        object-fit: scale-down;
        margin-top: auto;
        margin-bottom: auto;
        grid-row: background-start / background-two-end;

    }
}