/* global variables */
:root {
  --grid-cols: 1;
  --grid-row: 1;
}

/* containers  */
.container {
  max-width: 960px;
  height: 60vh;
  display: grid;
  grid-template-rows: repeat(var(--grid-rows), 1fr);
  grid-template-columns: repeat(var(--grid-cols), 1fr);
  margin: 0 auto;
  background-color: #eee8dc;
}

.btn-container {
  display: flex;
  justify-content: space-evenly;
  max-width: 960px;
  margin: 5em auto;
}

/* grid */
.grid-item {
  border: 1px dotted #000;
  transition: 0.2s ease-in;
}

.grid-item:hover {
  transition: 0.2s ease-out;
}

/* buttons */
.btn {
  padding: 1em;
}

.btn-color {
  min-height: 4em;
}

/* Mobile */

@media only screen and (max-width: 955px) {
  .container {
    margin: 2em 1em 0 1em;
  }

  .btn-container {
    margin: 4em 0.8em 0 0.8em;
  }

  .btn {
    margin: 0 0.4em 0.5em 0.4em;
    padding: 0.1em;
  }

  .btn-color {
    /* margin: 0 auto 0.5em auto; */
    padding: 0.5em;
  }
}