body {
    color: #000;
    font-family: futura-pt, sans-serif;
    font-style: normal;
    font-size: 1.5em;
    background-color: #ffcc00;
    background-image: url("https://www.transparenttextures.com/patterns/asfalt-dark.png");
    /* This is mostly intended for prototyping; please download the pattern and re-host for production environments. Thank you! */
}
.line {
    border-top: 3px solid #000;
    padding: 20px 0px 20px 0px;
}
.wrapper {
    display: grid;
    grid-template-columns: 50% 2% 50%;
    grid-template-rows: auto;
    width: 80%;
    margin: 50px auto;
}
.title {
    font-size: 3em;
    line-height: 1em;
    font-family: futura-pt-bold, sans-serif;
}
.b ul {
    list-style: none;
}
.a {
    /*   or grid-area: row-start / col start / row end / col end */
    
    grid-column: 1 / 2;
    grid-row: 1 / 2;
}
.b {
    grid-column: 3 / 4;
    grid-row: 1 / 2;
}
.c {
    font-weight: bold;
    font-size: 1.7em;
    grid-column: 1 / 2;
    grid-row: 2 / 3;
}
.d {
    font-weight: bold;
    font-size: 1.7em;
    grid-column: 1 / 2;
    grid-row: 3 / 4;
}
.e {
    font-weight: bold;
    font-size: 1.7em;
    grid-column: 1 / 2;
    grid-row: 4 / 5;
}
.f {
    grid-column: 3 / 4;
    grid-row: 2 / 3;
}
.g {
    grid-column: 3 / 4;
    grid-row: 3 / 4;
}
.h {
    grid-column: 3 / 4;
    grid-row: 4 / 5;
}

/* ========================================== MEDIA QUERIES ===================== */

@media only screen and (min-width: 460px) {
    .wrapper {
        display: grid;
        grid-template-columns: auto;
        grid-template-rows: auto;
    }
    .a {
   
        
        grid-row: 1 / 2;
    }
    .b {
        grid-column: 1 /2;
        grid-row: 2 / 3;
    }
    .c {
        grid-row: 3 / 4;
    }
    .d {
        grid-row: 4 / 5;
    }
    .e {
        grid-row: 5 / 6;
    }
    .f {
        grid-column: 1 /2;
        grid-row: 6 / 7;
    }
    .g {
        grid-column: 1 /2;
        grid-row: 8 / 9;
    }
    .h {
        grid-column: 1 /2;
        grid-row: 9 / 10;
    }
}

@media only screen and (min-width: 850px) {
    .wrapper {
    display: grid;
    grid-template-columns: 50% 2% 50%;
    grid-template-rows: auto;
    }
.a {
    /*   or grid-area: row-start / col start / row end / col end */
    
    grid-column: 1 / 2;
    grid-row: 1 / 2;
}
.b {
    grid-column: 3 / 4;
    grid-row: 1 / 2;
}
.c {
    font-weight: bold;
    font-size: 1.7em;
    grid-column: 1 / 2;
    grid-row: 2 / 3;
}
.d {
    font-weight: bold;
    font-size: 1.7em;
    grid-column: 1 / 2;
    grid-row: 3 / 4;
}
.e {
    font-weight: bold;
    font-size: 1.7em;
    grid-column: 1 / 2;
    grid-row: 4 / 5;
}
.f {
    grid-column: 3 / 4;
    grid-row: 2 / 3;
}
.g {
    grid-column: 3 / 4;
    grid-row: 3 / 4;
}
.h {
    grid-column: 3 / 4;
    grid-row: 4 / 5;
}
}