.no-header {
    background-image: url("../backgrounds/Diplom-PC.jpeg");
    background-repeat: no-repeat;
    background-size: 60vw;
    min-height: 50vw;
    background-position: center;
}

.diplom {
    margin-top: 10px;
    display: grid;
    column-gap: 10px;
    grid-template-columns: 30vw 35vw 30vw;
    grid-template-areas:
    "A B C"
    "D E F";
}

.box-dip-1 {
    grid-area: A;
    justify-self: start;
}

.box-dip-2 {
    grid-area: C;
    justify-self: end;
}

.box-dip-3 {
    grid-area: D;
    justify-self: start;
}

.box-dip-4 {
    grid-area: F;
    justify-self: end;
}

.box-1 {
    grid-area: B;
}

.box-2 {
    grid-area: E;
}

.dip-1 {
    width: 25vw;
}

@media screen and (max-width: 750px) {
    .no-header {
        background-size: 100vw;
        background-position: center;
    }

    .diplom {
        margin-top: 10px;
        display: grid;
        column-gap: 10px;
        grid-template-columns: 40vw 40vw;
        grid-template-rows: 35vw 70vw 35vw;
        grid-template-areas:
        "A C"
        "B E"
        "D F";
    }

    .box-dip-1 {
        justify-self: end;
    }
    
    .box-dip-2 {
        justify-self: end;
    }
    
    .box-dip-3 {
        justify-self: end;
    }
    
    .box-dip-4 {
        justify-self: end;
    }
}