@media screen and (max-width: 500px) {
    #main {
        padding: 5px;
    }

    .pageframe {
        margin: 0.5em;
    }

    #content {
        padding: 0.5em;
    }

    .frontIntro article {
        max-width: 100%;
    }

    .main_intro_grid {
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: auto;
        grid-gap: 0em;
        grid-template-areas:
        "main_intro_text"
        "main_intro_key";
    }

    .main_intro_text h2 {
        margin-top: 10px;
    }

    .wbdv_header {
        flex-flow: column wrap;
        justify-content: center;
    }

    .wbdv_header h2 {
        padding-left: 0em;
        margin-bottom: 5px;
    }

    .wbdv_header h3 {
        padding-right: 0em;
        margin-top: 5px;
    }
    .Bgrid img {
        width: 100%;
    }
}