#contract {
    background-color: var(--pattensBlue);
    color: var(--black);
}

#mistakes {
    background-color: var(--silkBlue);
    color: var(--white);
    grid-column: 1 / span 2;
}

.empty-line {
    height: 1em;
}

.invoice-section {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: repeat(4, auto);
}

#mistakes-verbiage {
    color: var(--beluga) !important;
}

#services-header,  #materials-header, #subtotal {
    grid-column: 1 / span 1;
    grid-row: 1 / span 1;
}

#services-quantity, #materials-quantity, #job-total {
    grid-column: 1 / span 1;
    grid-row: 2 / span 1;
}

#services-unit-price, #materials-unit-price {
    grid-column: 1 / span 1;
    grid-row: 3 / span 1;
}

#services-amount, #materials-amount {
    grid-column: 1 / span 1;
    grid-row: 4 / span 1;
}
#service-description, #materials-description, #subtotal-amount {
    grid-column: 2 / span 1;
    grid-row: 1 / span 1;
}

#service-description-quantity, #materials-description-quantity, #job-total-amount {
    grid-column: 2 / span 1;
    grid-row: 2 / span 1;
}

#service-description-unit-price, #materials-description-unit-price {
    grid-column: 2 / span 1;
    grid-row: 3 / span 1;
}

#service-description-amount, #materials-description-amount {
    grid-column: 2 / span 1;
    grid-row: 4 / span 1;
}

@media screen
and (min-width: 400px) {
    .invoice-section {
        grid-template-columns: 1fr 2fr;
    }
}

@media screen
and (min-width: 800px)
and (orientation: portrait) {
    .invoice-section {
        grid-template-columns: 1fr 3fr;
    }
}

@media screen
and (min-width: 1024px) {

    .invoice-section {
        display: grid;
        grid-template-columns: 3fr 1fr 1fr 1fr;
        grid-template-rows: repeat(2, auto);
    }

    #services-header,  #materials-header {
        grid-column: 1 / span 1;
        grid-row: 1 / span 1;
    }

    #services-quantity, #materials-quantity {
        grid-column: 2 / span 1;
        grid-row: 1 / span 1;
    }

    #services-unit-price, #materials-unit-price, #subtotal {
        grid-column: 3 / span 1;
        grid-row: 1 / span 1;
    }

    #services-amount, #materials-amount, #subtotal-amount {
        grid-column: 4 / span 1;
        grid-row: 1 / span 1;
    }
/* */
    #service-description, #materials-description {
        grid-column: 1 / span 1;
        grid-row: 2 / span 1;
    }

    #service-description-quantity, #materials-description-quantity {
        grid-column: 2 / span 1;
        grid-row: 2 / span 1;
    }

    #service-description-unit-price, #materials-description-unit-price, #job-total {
        grid-column: 3 / span 1;
        grid-row: 2 / span 1;
    }

    #service-description-amount, #materials-description-amount, #job-total-amount {
        grid-column: 4 / span 1;
        grid-row: 2 / span 1;
    }
}