:root {
    --quote-reporter-grid-container-height: 80vh;
    --quote-reporter-grid-rpttoprow-height: 40px;
}

.quote-reporter-grid-container {
    display: grid;
    grid-template-columns: max-content max-content max-content 1fr;
    grid-template-rows: var(--quote-reporter-grid-rpttoprow-height) minmax(0, 1fr) auto;
    grid-template-areas: 
        'rpttoprowleft rpttoprowmailformat rpttoprowmailcommand .' 
        'rptresults rptresults rptresults rptresults' 
        '. . . .';
    row-gap: 1rem;
    column-gap: 1rem;
    align-items: start;
    height: var(--quote-reporter-grid-container-height);
}

@media all and (max-width: 767px) {
    .quote-reporter-grid-container {
        display: grid;
        grid-template-columns: max-content max-content 1fr;
        grid-template-rows: auto auto auto minmax(0, 1fr) auto;
        grid-template-areas:
            'rpttoprowleft rpttoprowleft .'
            'rpttoprowmailformat rpttoprowmailformat .'
            'rpttoprowmailcommand rpttoprowmailcommand .'
            'rptresults rptresults rptresults '
            '. . . ';
        row-gap: 1rem;
        column-gap: 1rem;
        align-items: start;
        height: var(--quote-reporter-grid-container-height);
    }
}

.quote-reporter-grid-rpttoprowleft {
    grid-area: rpttoprowleft;
    align-self: center;
}

.quote-reporter-grid-rpttoprowmailformat {
    grid-area: rpttoprowmailformat;
    align-self: center;
}

.quote-reporter-grid-rpttoprowmailcommand {
    grid-area: rpttoprowmailcommand;
    align-self: center;
}

.quote-reporter-grid-rptresults {
    grid-area: rptresults;
    justify-self: stretch;
    align-self: stretch;
}