/* =============
  Grid Layout
  =============*/

.header {
  display: grid;
}
.grid-container {
  display: grid;
  grid-template-columns: minmax(450px, 700px);
}
.modal-button {
  display: grid;
  grid-template-columns: 0.5fr 0.5fr;
}

@media (min-width: 768px) {
  .header {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .grid-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
}

@media (min-width: 1024px) {
  .header {
    margin-top: 50px;
  }

  .grid-container {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    margin-top: 100px;
  }
}