.d-flex {
  display: flex;
}

.fl-wrap{
  flex-wrap: wrap;
}

.wrapper {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  max-width: 1440px;
  padding-left: 16px;
  padding-right: 16px;
  margin-right: auto;
  margin-left: auto;
  column-gap: 16px;
}

.col-1 {
  grid-column: span 1;
}

.col-2 {
  grid-column: span 2;
}

.col-3 {
  grid-column: span 3;
}

.col-4 {
  grid-column: span 4;
}

.col-5 {
  grid-column: span 5;
}

.col-6 {
  grid-column: span 6;
}

.col-7 {
  grid-column: span 7;
}

.col-8 {
  grid-column: span 8;
}

.col-9 {
  grid-column: span 9;
}

.col-10 {
  grid-column: span 10;
}

.col-11 {
  grid-column: span 11;
}

.col-12 {
  grid-column: span 12;
}

@media (max-width: 768px) {

  .col-1 {
    grid-column: span 12;
  }

  .col-2 {
    grid-column: span 12;
  }

  .col-3 {
    grid-column: span 12;
  }

  .col-4 {
    grid-column: span 12;
  }

  .col-5 {
    grid-column: span 12;
  }

  .col-6 {
    grid-column: span 12;
  }

  .col-7 {
    grid-column: span 12;
  }

  .col-8 {
    grid-column: span 12;
  }

  .col-9 {
    grid-column: span 12;
  }

  .col-10 {
    grid-column: span 12;
  }

  .col-11 {
    grid-column: span 12;
  }

  .col-12 {
    grid-column: span 12;
  }

  .column-half-width {
    grid-column: span 6;
  }
}

::placeholder {
  color: #9999A7;
}

::-webkit-input-placeholder {
  color: #9999A7;
}

::-moz-placeholder {
  color: #9999A7;
  opacity: 1;
}

:-ms-input-placeholder {
  color: #9999A7;
}