* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.bandtxt {
    padding: 0 5%;
    margin-top: 6vh;
    width: 100%;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;

    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-template-rows: auto auto auto auto;
    grid-template-areas:
        ". tx tx tx chr"
        "yps tx tx tx chr"
        "yps . ha ha chr"
        "yps . ha ha chr";
    gap: 1rem;
}

.bandtxt img {
    max-width: 100%;
    height: auto;
    object-fit: cover;
}

.text3 {
    grid-area: tx;
    font-family: sans-serif;
    color: white;
    max-width: 100%;
}

.chris {
    grid-area: chr;
    justify-self: end;
}

.yps {
    grid-area: yps;
    justify-self: start;
}

.harry {
    grid-area: ha;
    justify-self: start;
}

.h1 {
    font-size: 2.5rem;
    text-decoration: underline;
    margin: 2rem 0 1rem;
}

.sans {
    font-family: serif;
    font-size: 2rem;
    line-height: 1.5;
    text-shadow: 2px 2px 1px black;
}

/* Tablet Ansicht */
@media (max-width: 1000px) {
    .h1 {
        font-size: 1.8rem;
    }

    .sans {
        font-size: 2rem;


    }

    .bandtxt {
        grid-template-columns: repeat(4, 1fr);
        grid-template-areas:
            "tx tx tx chr"
            "tx tx tx chr"
            "yps . ha ha"
            "yps . ha ha";
    }
}

/* Mobile Ansicht */
@media (max-width: 500px) {
    .h1 {
        font-size: 1.5rem;
        margin: 3rem 0 2rem;
    }

    .sans {
        font-size: 1rem;
        line-height: 1.6;
    }

    .chris,
    .yps,
    .harry {
        display: none;
    }

    .bandtxt {
        display: block;
        width: 100%;
    }
}