.container {
  padding: .5rem;
}
/* 6 dálka grid -  Mobile up 
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.col-1,
.col-2,
.col-3,
.col-4,
.col-31,
.col-6 {
  display: grid;
  grid-template-columns: 1fr;
  row-gap: 1rem;
}

/* vinnurammi til að sjá div*/
.rammi div{
  border: 1px dashed #0070F3;
  text-align: center;
  padding: .5rem 0;
}
.rammi div:last-child {
  margin-bottom: 1rem;  /* ath */
}

/* Media Queries
–––––––––––––––––––––––––––––––––––––––––––––––––– */
@media screen and (min-width: 20rem) {}

@media screen and (min-width: 30rem) {}

@media screen and (min-width: 37.5rem) {}

@media screen and (min-width: 48rem) {
  .col-1,
  .col-2,
  .col-4 
  .col-3,
  .col-31,
  .col-6 {
    gap: 1rem;
    row-gap: 1rem;
  }
  .col-4 {
    grid-template-columns: 1fr 1fr;
  }
  .col-3 {
    grid-template-columns: repeat(3, 1fr);
  }

  .col-31 {
    grid-template-columns: 2fr 1fr;
  }
  .col-6 {
    grid-template-columns: repeat(6, 1fr);
  }
  .rammi div:last-child {
    margin-bottom: 0;  /* ath */
  }
}

/* Larger than tablet */
@media screen and (min-width: 60rem) {
  .container {
    max-width: 60em;
    margin: 0 auto;
    padding: 0;
  }
  .col-1,
  .col-2,
  .col-4,
  .col-3,
  .col-31,
  .col-6 {
    gap: 2rem;
  }
  .col-2 {
    grid-template-columns: 1fr 1fr;
  }
  .col-4 {
    grid-template-columns: repeat(4, 1fr);
  }
  .col-31 {
    grid-template-columns: 3fr 1fr;
  }
}

/* Larger than Desktop HD */
@media (min-width: 80rem) {
  .container {
    max-width: 80em;
  }

}