/* my CSS Code */

/* zwei Bilder nebeneinander mit css grid */

.sfb2-grid-container {
    display: grid;
    grid-gap: 20px;
    padding: 0px;
}
@media only screen and (min-width: 1200px) {
    .sfb2-grid-container {
        margin-left: 0px;
    }
}

.sfb2-left-image-container, .sfb2-right-image-container {
    display: grid;
    justify-content: center;
    align-items: center;
}
.sfb2-left-image-container {
    grid-area: leftpic;
}
.sfb2-right-image-container {
    grid-area:rightpic;
}
.sfb-project-text {
    grid-area: lefttext;
}

@media only screen and (max-width: 768px) {
    .sfb2-grid-container {
        grid-template-columns: 100%;
        grid-template-areas:
        "leftpic"
        "lefttext"
        "rightpic"
        "righttext";
    }
}

@media only screen and (min-width: 769px) {
    .sfb2-grid-container {
        grid-template-columns: 50% 50%;
        grid-template-areas:
        "leftpic rightpic"
        "lefttext righttext";
    }

    .sfb2-left-image-container, .sfb2-right-image-container, .sfb-project-text {
        padding: 0 10px 0 10px;
    }
}