.col-1,
.col-2,
.col-3,
.col-4,
.col-5,
.col-6 {
  display: grid;
  grid-template-columns: 1fr;
  row-gap: 1rem;
}

.rammi div{
  border: 1px dashed #0070F3;
  text-align: center;
  padding: .5rem 0;
}
.rammi div:last-child {
  margin-bottom: 1rem;
}

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

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

@media screen and (min-width: 37.5rem) {
  .col-2,
  .col-4 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
  }
}

@media screen and (min-width: 48rem) {
  .col-1,
  .col-2,
  .col-4 
  .col-3,
  .col-5,
  .col-6 {
    gap: 1rem;
    row-gap: 1rem;
  }
  .col-3 {
    grid-template-columns: repeat(3, 1fr);
  }
  .col-4 {
    grid-template-columns: repeat(4, 1fr);
  }
  .col-5 {
    grid-template-columns: repeat(5, 1fr);
  }
  .col-6 {
    grid-template-columns: repeat(6, 1fr);
  }
  .rammi div:last-child {
    margin-bottom: 0; 
  }
}

@media screen and (min-width: 60rem) {
  .container {
    max-width: 60em;
    margin: 0 auto;
    padding: 0;
  }
  .col-1,
  .col-2,
  .col-4,
  .col-3,
  .col-5,
  .col-6 {
    gap: 2rem;
    margin-bottom: 10rem;
  }
}

@media (min-width: 80rem) {
  .container {
    max-width: 80em;
  }
}