body {
  display: grid;
}

#calculator {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: auto;
  width: 320px;
  height: 568px;
}

#response-pane {
  display: grid;
  grid-area: response-pane;
  grid-column: 1/5;
  grid-row: 1/2;
}

#modifier-buttons {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-column: 1/4;
  grid-row: 2/3;
}

#operation-buttons {
  display: grid;
  grid-area: operation-buttons;
  grid-column: 4/5;
  grid-row: 2/7;
}

#digit-buttons {
  display: grid;
  grid-area: digit-buttons;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(4, 1fr);
  grid-column: 1/4;
  grid-row: 3/7;
}

.digits:nth-last-child(2) {
  grid-column: 1/3;
}


/* BEGIN CALCULATOR STYLING */

body {
  display: grid;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 75%;
}

#calculator {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: auto;
  width: 320px;
  height: 568px;
}

#response-pane {
  display: grid;
  grid-area: response-pane;
  grid-column: 1/5;
  grid-row: 1/2;
  background-color: #292929;
  color: #FFFFFF
}

#modifier-buttons {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-column: 1/4;
  grid-row: 2/3;
}

.modifiers {
  background-color: #D6D6D6;
}

#operation-buttons {
  display: grid;
  grid-area: operation-buttons;
  grid-column: 4/5;
  grid-row: 2/7;
}

.operations {
  background-color: #FF7F00;
  color: #FFFFFF;
}

#digit-buttons {
  display: grid;
  grid-area: digit-buttons;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(4, 1fr);
  grid-column: 1/4;
  grid-row: 3/7;
}

.digits:nth-last-child(2) {
  grid-column: 1/3;
}

.digits {
  background-color: #E0E0E0;
}
Add colors and font family
Add colors and font family
