:root {
  --col-width: 8.33333333333%;
}
.container {
  max-width: 900px;
  margin: auto;
  margin-top: 100px;
  margin-bottom: 100px;
}

.container.pay{
  display: flex;
  height: 65vh;
  align-items: center;
  justify-content: center;
}

.row {
  display: flex;
}

.col-1 {
  width: var(--col-width);
}

.col-2 {
  width: calc(var(--col-width) * 2);
}

.col-3 {
  width: calc(var(--col-width) * 3);
}

.col-4 {
  width: calc(var(--col-width) * 4);
}

.col-5 {
  width: calc(var(--col-width) * 5);
}

.col-6 {
  width: calc(var(--col-width) * 6);
}

.col-7 {
  width: calc(var(--col-width) * 7);
}

.col-8 {
  width: calc(var(--col-width) * 8);
}

.col-9 {
  width: calc(var(--col-width) * 9);
}

.col-10 {
  width: calc(var(--col-width) * 10);
}

.col-11 {
  width: calc(var(--col-width) * 11);
}

.col-12 {
  width: calc(var(--col-width) * 12);
}

.col-1,.col-2,.col-3,.col-4,.col-5,.col-6,
.col-7,.col-8,.col-9,.col-10,.col-11,.col-12{
  padding: 10px
}

h2{
  font-size: 30px;
  margin: 80px 0 50px 0;
}

h4  {
  margin-top: 81px;
}

@media (max-width: 900px){
  .row{
    display: inherit;
  }
  .col-1,.col-2,.col-3,.col-4,.col-5,.col-6,
.col-7,.col-8,.col-9,.col-10,.col-11,.col-12{
  width: 100%;
}
}