button {
    width: 100%;
}

.unit-container {
    margin-top:20px;
    margin-bottom:20px;       
}

.unit-image-container {
    width:20%;
    float:left;
}

.unit-lesson-container {
    width:80%;
    float:left;
}

.standard-text {
    text-align:center;
    border:1px solid darkgray;
    border-radius:5px;
    padding:10px;
    background-color:#F4F6F6;
}

.standard-navigation-grid{
    display:grid;
    grid-gap:5px;
    grid-template-columns: 10% auto 10%;
}


/* --------- iphone portrait -----------  */
@media screen and (max-width: 540px) {    
    .standard-navigation-grid {
        grid-template-columns: 50% 50%;
        grid-template-rows: auto auto;
    }

    .previous-button {
        grid-column-start: 1;
        grid-column-end: 2;
        grid-row-start: 1;
        grid-row-end:2;

    }

    .next-button {
        grid-column-start: 2;
        grid-row-start: 1;
        grid-row-end: 2;        
    }

    .standard-text {
        grid-column-start: 1;
        grid-column-end:3;
        
        grid-row-start: 2;
    }
    
}