* {
  box-sizing: border-box;
}
.row-wrapper {
  padding-inline: 0.5rem;
}
.row {
  display: flex;
  flex-wrap: wrap;
  margin-inline: -0.5rem;
}
.row > div:nth-child(odd) {
  background-color: #90ee90;
}
.row > div:nth-child(even) {
  background-color: #add8e6;
}
.col-1 {
  flex: 0 0 calc(1 / 12 * 100%);
  width: calc(1 / 12 * 100%);
  max-width: calc(1 / 12 * 100%);
  padding-inline: 0.5rem;
}
.col-2 {
  flex: 0 0 calc(2 / 12 * 100%);
  width: calc(2 / 12 * 100%);
  max-width: calc(2 / 12 * 100%);
  padding-inline: 0.5rem;
}
.col-3 {
  flex: 0 0 calc(3 / 12 * 100%);
  width: calc(3 / 12 * 100%);
  max-width: calc(3 / 12 * 100%);
  padding-inline: 0.5rem;
}
.col-4 {
  flex: 0 0 calc(4 / 12 * 100%);
  width: calc(4 / 12 * 100%);
  max-width: calc(4 / 12 * 100%);
  padding-inline: 0.5rem;
}
.col-5 {
  flex: 0 0 calc(5 / 12 * 100%);
  width: calc(5 / 12 * 100%);
  max-width: calc(5 / 12 * 100%);
  padding-inline: 0.5rem;
}
.col-6 {
  flex: 0 0 calc(6 / 12 * 100%);
  width: calc(6 / 12 * 100%);
  max-width: calc(6 / 12 * 100%);
  padding-inline: 0.5rem;
}
.col-7 {
  flex: 0 0 calc(7 / 12 * 100%);
  width: calc(7 / 12 * 100%);
  max-width: calc(7 / 12 * 100%);
  padding-inline: 0.5rem;
}
.col-8 {
  flex: 0 0 calc(8 / 12 * 100%);
  width: calc(8 / 12 * 100%);
  max-width: calc(8 / 12 * 100%);
  padding-inline: 0.5rem;
}
.col-9 {
  flex: 0 0 calc(9 / 12 * 100%);
  width: calc(9 / 12 * 100%);
  max-width: calc(9 / 12 * 100%);
  padding-inline: 0.5rem;
}
.col-10 {
  flex: 0 0 calc(10 / 12 * 100%);
  width: calc(10 / 12 * 100%);
  max-width: calc(10 / 12 * 100%);
  padding-inline: 0.5rem;
}
.col-11 {
  flex: 0 0 calc(11 / 12 * 100%);
  width: calc(11 / 12 * 100%);
  max-width: calc(11 / 12 * 100%);
  padding-inline: 0.5rem;
}
.col-12 {
  flex: 0 0 calc(12 / 12 * 100%);
  width: calc(12 / 12 * 100%);
  max-width: calc(12 / 12 * 100%);
  padding-inline: 0.5rem;
}
@media (min-width: 576px) {
  .sm-col-1 {
    flex: 0 0 calc(1 / 12 * 100%);
    width: calc(1 / 12 * 100%);
    max-width: calc(1 / 12 * 100%);
    padding-inline: 0.5rem;
  }
}
@media (min-width: 576px) {
  .sm-col-2 {
    flex: 0 0 calc(2 / 12 * 100%);
    width: calc(2 / 12 * 100%);
    max-width: calc(2 / 12 * 100%);
    padding-inline: 0.5rem;
  }
}
@media (min-width: 576px) {
  .sm-col-3 {
    flex: 0 0 calc(3 / 12 * 100%);
    width: calc(3 / 12 * 100%);
    max-width: calc(3 / 12 * 100%);
    padding-inline: 0.5rem;
  }
}
@media (min-width: 576px) {
  .sm-col-4 {
    flex: 0 0 calc(4 / 12 * 100%);
    width: calc(4 / 12 * 100%);
    max-width: calc(4 / 12 * 100%);
    padding-inline: 0.5rem;
  }
}
@media (min-width: 576px) {
  .sm-col-5 {
    flex: 0 0 calc(5 / 12 * 100%);
    width: calc(5 / 12 * 100%);
    max-width: calc(5 / 12 * 100%);
    padding-inline: 0.5rem;
  }
}
@media (min-width: 576px) {
  .sm-col-6 {
    flex: 0 0 calc(6 / 12 * 100%);
    width: calc(6 / 12 * 100%);
    max-width: calc(6 / 12 * 100%);
    padding-inline: 0.5rem;
  }
}
@media (min-width: 576px) {
  .sm-col-7 {
    flex: 0 0 calc(7 / 12 * 100%);
    width: calc(7 / 12 * 100%);
    max-width: calc(7 / 12 * 100%);
    padding-inline: 0.5rem;
  }
}
@media (min-width: 576px) {
  .sm-col-8 {
    flex: 0 0 calc(8 / 12 * 100%);
    width: calc(8 / 12 * 100%);
    max-width: calc(8 / 12 * 100%);
    padding-inline: 0.5rem;
  }
}
@media (min-width: 576px) {
  .sm-col-9 {
    flex: 0 0 calc(9 / 12 * 100%);
    width: calc(9 / 12 * 100%);
    max-width: calc(9 / 12 * 100%);
    padding-inline: 0.5rem;
  }
}
@media (min-width: 576px) {
  .sm-col-10 {
    flex: 0 0 calc(10 / 12 * 100%);
    width: calc(10 / 12 * 100%);
    max-width: calc(10 / 12 * 100%);
    padding-inline: 0.5rem;
  }
}
@media (min-width: 576px) {
  .sm-col-11 {
    flex: 0 0 calc(11 / 12 * 100%);
    width: calc(11 / 12 * 100%);
    max-width: calc(11 / 12 * 100%);
    padding-inline: 0.5rem;
  }
}
@media (min-width: 576px) {
  .sm-col-12 {
    flex: 0 0 calc(12 / 12 * 100%);
    width: calc(12 / 12 * 100%);
    max-width: calc(12 / 12 * 100%);
    padding-inline: 0.5rem;
  }
}
@media (min-width: 768px) {
  .md-col-1 {
    flex: 0 0 calc(1 / 12 * 100%);
    width: calc(1 / 12 * 100%);
    max-width: calc(1 / 12 * 100%);
    padding-inline: 0.5rem;
  }
}
@media (min-width: 768px) {
  .md-col-2 {
    flex: 0 0 calc(2 / 12 * 100%);
    width: calc(2 / 12 * 100%);
    max-width: calc(2 / 12 * 100%);
    padding-inline: 0.5rem;
  }
}
@media (min-width: 768px) {
  .md-col-3 {
    flex: 0 0 calc(3 / 12 * 100%);
    width: calc(3 / 12 * 100%);
    max-width: calc(3 / 12 * 100%);
    padding-inline: 0.5rem;
  }
}
@media (min-width: 768px) {
  .md-col-4 {
    flex: 0 0 calc(4 / 12 * 100%);
    width: calc(4 / 12 * 100%);
    max-width: calc(4 / 12 * 100%);
    padding-inline: 0.5rem;
  }
}
@media (min-width: 768px) {
  .md-col-5 {
    flex: 0 0 calc(5 / 12 * 100%);
    width: calc(5 / 12 * 100%);
    max-width: calc(5 / 12 * 100%);
    padding-inline: 0.5rem;
  }
}
@media (min-width: 768px) {
  .md-col-6 {
    flex: 0 0 calc(6 / 12 * 100%);
    width: calc(6 / 12 * 100%);
    max-width: calc(6 / 12 * 100%);
    padding-inline: 0.5rem;
  }
}
@media (min-width: 768px) {
  .md-col-7 {
    flex: 0 0 calc(7 / 12 * 100%);
    width: calc(7 / 12 * 100%);
    max-width: calc(7 / 12 * 100%);
    padding-inline: 0.5rem;
  }
}
@media (min-width: 768px) {
  .md-col-8 {
    flex: 0 0 calc(8 / 12 * 100%);
    width: calc(8 / 12 * 100%);
    max-width: calc(8 / 12 * 100%);
    padding-inline: 0.5rem;
  }
}
@media (min-width: 768px) {
  .md-col-9 {
    flex: 0 0 calc(9 / 12 * 100%);
    width: calc(9 / 12 * 100%);
    max-width: calc(9 / 12 * 100%);
    padding-inline: 0.5rem;
  }
}
@media (min-width: 768px) {
  .md-col-10 {
    flex: 0 0 calc(10 / 12 * 100%);
    width: calc(10 / 12 * 100%);
    max-width: calc(10 / 12 * 100%);
    padding-inline: 0.5rem;
  }
}
@media (min-width: 768px) {
  .md-col-11 {
    flex: 0 0 calc(11 / 12 * 100%);
    width: calc(11 / 12 * 100%);
    max-width: calc(11 / 12 * 100%);
    padding-inline: 0.5rem;
  }
}
@media (min-width: 768px) {
  .md-col-12 {
    flex: 0 0 calc(12 / 12 * 100%);
    width: calc(12 / 12 * 100%);
    max-width: calc(12 / 12 * 100%);
    padding-inline: 0.5rem;
  }
}
@media (min-width: 992px) {
  .lg-col-1 {
    flex: 0 0 calc(1 / 12 * 100%);
    width: calc(1 / 12 * 100%);
    max-width: calc(1 / 12 * 100%);
    padding-inline: 0.5rem;
  }
}
@media (min-width: 992px) {
  .lg-col-2 {
    flex: 0 0 calc(2 / 12 * 100%);
    width: calc(2 / 12 * 100%);
    max-width: calc(2 / 12 * 100%);
    padding-inline: 0.5rem;
  }
}
@media (min-width: 992px) {
  .lg-col-3 {
    flex: 0 0 calc(3 / 12 * 100%);
    width: calc(3 / 12 * 100%);
    max-width: calc(3 / 12 * 100%);
    padding-inline: 0.5rem;
  }
}
@media (min-width: 992px) {
  .lg-col-4 {
    flex: 0 0 calc(4 / 12 * 100%);
    width: calc(4 / 12 * 100%);
    max-width: calc(4 / 12 * 100%);
    padding-inline: 0.5rem;
  }
}
@media (min-width: 992px) {
  .lg-col-5 {
    flex: 0 0 calc(5 / 12 * 100%);
    width: calc(5 / 12 * 100%);
    max-width: calc(5 / 12 * 100%);
    padding-inline: 0.5rem;
  }
}
@media (min-width: 992px) {
  .lg-col-6 {
    flex: 0 0 calc(6 / 12 * 100%);
    width: calc(6 / 12 * 100%);
    max-width: calc(6 / 12 * 100%);
    padding-inline: 0.5rem;
  }
}
@media (min-width: 992px) {
  .lg-col-7 {
    flex: 0 0 calc(7 / 12 * 100%);
    width: calc(7 / 12 * 100%);
    max-width: calc(7 / 12 * 100%);
    padding-inline: 0.5rem;
  }
}
@media (min-width: 992px) {
  .lg-col-8 {
    flex: 0 0 calc(8 / 12 * 100%);
    width: calc(8 / 12 * 100%);
    max-width: calc(8 / 12 * 100%);
    padding-inline: 0.5rem;
  }
}
@media (min-width: 992px) {
  .lg-col-9 {
    flex: 0 0 calc(9 / 12 * 100%);
    width: calc(9 / 12 * 100%);
    max-width: calc(9 / 12 * 100%);
    padding-inline: 0.5rem;
  }
}
@media (min-width: 992px) {
  .lg-col-10 {
    flex: 0 0 calc(10 / 12 * 100%);
    width: calc(10 / 12 * 100%);
    max-width: calc(10 / 12 * 100%);
    padding-inline: 0.5rem;
  }
}
@media (min-width: 992px) {
  .lg-col-11 {
    flex: 0 0 calc(11 / 12 * 100%);
    width: calc(11 / 12 * 100%);
    max-width: calc(11 / 12 * 100%);
    padding-inline: 0.5rem;
  }
}
@media (min-width: 992px) {
  .lg-col-12 {
    flex: 0 0 calc(12 / 12 * 100%);
    width: calc(12 / 12 * 100%);
    max-width: calc(12 / 12 * 100%);
    padding-inline: 0.5rem;
  }
}
@media (min-width: 1200px) {
  .xl-col-1 {
    flex: 0 0 calc(1 / 12 * 100%);
    width: calc(1 / 12 * 100%);
    max-width: calc(1 / 12 * 100%);
    padding-inline: 0.5rem;
  }
}
@media (min-width: 1200px) {
  .xl-col-2 {
    flex: 0 0 calc(2 / 12 * 100%);
    width: calc(2 / 12 * 100%);
    max-width: calc(2 / 12 * 100%);
    padding-inline: 0.5rem;
  }
}
@media (min-width: 1200px) {
  .xl-col-3 {
    flex: 0 0 calc(3 / 12 * 100%);
    width: calc(3 / 12 * 100%);
    max-width: calc(3 / 12 * 100%);
    padding-inline: 0.5rem;
  }
}
@media (min-width: 1200px) {
  .xl-col-4 {
    flex: 0 0 calc(4 / 12 * 100%);
    width: calc(4 / 12 * 100%);
    max-width: calc(4 / 12 * 100%);
    padding-inline: 0.5rem;
  }
}
@media (min-width: 1200px) {
  .xl-col-5 {
    flex: 0 0 calc(5 / 12 * 100%);
    width: calc(5 / 12 * 100%);
    max-width: calc(5 / 12 * 100%);
    padding-inline: 0.5rem;
  }
}
@media (min-width: 1200px) {
  .xl-col-6 {
    flex: 0 0 calc(6 / 12 * 100%);
    width: calc(6 / 12 * 100%);
    max-width: calc(6 / 12 * 100%);
    padding-inline: 0.5rem;
  }
}
@media (min-width: 1200px) {
  .xl-col-7 {
    flex: 0 0 calc(7 / 12 * 100%);
    width: calc(7 / 12 * 100%);
    max-width: calc(7 / 12 * 100%);
    padding-inline: 0.5rem;
  }
}
@media (min-width: 1200px) {
  .xl-col-8 {
    flex: 0 0 calc(8 / 12 * 100%);
    width: calc(8 / 12 * 100%);
    max-width: calc(8 / 12 * 100%);
    padding-inline: 0.5rem;
  }
}
@media (min-width: 1200px) {
  .xl-col-9 {
    flex: 0 0 calc(9 / 12 * 100%);
    width: calc(9 / 12 * 100%);
    max-width: calc(9 / 12 * 100%);
    padding-inline: 0.5rem;
  }
}
@media (min-width: 1200px) {
  .xl-col-10 {
    flex: 0 0 calc(10 / 12 * 100%);
    width: calc(10 / 12 * 100%);
    max-width: calc(10 / 12 * 100%);
    padding-inline: 0.5rem;
  }
}
@media (min-width: 1200px) {
  .xl-col-11 {
    flex: 0 0 calc(11 / 12 * 100%);
    width: calc(11 / 12 * 100%);
    max-width: calc(11 / 12 * 100%);
    padding-inline: 0.5rem;
  }
}
@media (min-width: 1200px) {
  .xl-col-12 {
    flex: 0 0 calc(12 / 12 * 100%);
    width: calc(12 / 12 * 100%);
    max-width: calc(12 / 12 * 100%);
    padding-inline: 0.5rem;
  }
}
@media (min-width: 1400px) {
  .xxl-col-1 {
    flex: 0 0 calc(1 / 12 * 100%);
    width: calc(1 / 12 * 100%);
    max-width: calc(1 / 12 * 100%);
    padding-inline: 0.5rem;
  }
}
@media (min-width: 1400px) {
  .xxl-col-2 {
    flex: 0 0 calc(2 / 12 * 100%);
    width: calc(2 / 12 * 100%);
    max-width: calc(2 / 12 * 100%);
    padding-inline: 0.5rem;
  }
}
@media (min-width: 1400px) {
  .xxl-col-3 {
    flex: 0 0 calc(3 / 12 * 100%);
    width: calc(3 / 12 * 100%);
    max-width: calc(3 / 12 * 100%);
    padding-inline: 0.5rem;
  }
}
@media (min-width: 1400px) {
  .xxl-col-4 {
    flex: 0 0 calc(4 / 12 * 100%);
    width: calc(4 / 12 * 100%);
    max-width: calc(4 / 12 * 100%);
    padding-inline: 0.5rem;
  }
}
@media (min-width: 1400px) {
  .xxl-col-5 {
    flex: 0 0 calc(5 / 12 * 100%);
    width: calc(5 / 12 * 100%);
    max-width: calc(5 / 12 * 100%);
    padding-inline: 0.5rem;
  }
}
@media (min-width: 1400px) {
  .xxl-col-6 {
    flex: 0 0 calc(6 / 12 * 100%);
    width: calc(6 / 12 * 100%);
    max-width: calc(6 / 12 * 100%);
    padding-inline: 0.5rem;
  }
}
@media (min-width: 1400px) {
  .xxl-col-7 {
    flex: 0 0 calc(7 / 12 * 100%);
    width: calc(7 / 12 * 100%);
    max-width: calc(7 / 12 * 100%);
    padding-inline: 0.5rem;
  }
}
@media (min-width: 1400px) {
  .xxl-col-8 {
    flex: 0 0 calc(8 / 12 * 100%);
    width: calc(8 / 12 * 100%);
    max-width: calc(8 / 12 * 100%);
    padding-inline: 0.5rem;
  }
}
@media (min-width: 1400px) {
  .xxl-col-9 {
    flex: 0 0 calc(9 / 12 * 100%);
    width: calc(9 / 12 * 100%);
    max-width: calc(9 / 12 * 100%);
    padding-inline: 0.5rem;
  }
}
@media (min-width: 1400px) {
  .xxl-col-10 {
    flex: 0 0 calc(10 / 12 * 100%);
    width: calc(10 / 12 * 100%);
    max-width: calc(10 / 12 * 100%);
    padding-inline: 0.5rem;
  }
}
@media (min-width: 1400px) {
  .xxl-col-11 {
    flex: 0 0 calc(11 / 12 * 100%);
    width: calc(11 / 12 * 100%);
    max-width: calc(11 / 12 * 100%);
    padding-inline: 0.5rem;
  }
}
@media (min-width: 1400px) {
  .xxl-col-12 {
    flex: 0 0 calc(12 / 12 * 100%);
    width: calc(12 / 12 * 100%);
    max-width: calc(12 / 12 * 100%);
    padding-inline: 0.5rem;
  }
}
.container {
  background-color: aqua;
  margin-inline: auto;
  padding: 20px;
  margin-block: 25px;
  font-size: 1.5rem;
}
@media (min-width: 320px) {
  .container {
    max-width: 320px;
  }
}
@media (min-width: 576px) {
  .container {
    max-width: 540px;
  }
}
@media (min-width: 768px) {
  .container {
    max-width: 720px;
  }
}
@media (min-width: 992px) {
  .container {
    max-width: 960px;
  }
}
@media (min-width: 1200px) {
  .container {
    max-width: 1140px;
  }
}
@media (min-width: 1400px) {
  .container {
    max-width: 1320px;
  }
} /*# sourceMappingURL=style.min.css.map */