.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  grid-column-gap: 3px;
  grid-row-gap: 3px;
  background-color: #48487c;
  border-top: #48487c 3px solid;
  border-bottom: #48487c 3px solid;
}

.grid > div {
  background-color: #262643;
}

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

.img-fit {
  max-width: 100%;
  height: auto;
}

.grid .center {
  display: flex;
  justify-content: center;
  align-items: center;
}

.grid-content {
  padding: 0 20px;
}

.grid-content p {
  margin-left: 12px;
  margin-bottom: 25px;
}

.grid-content .btn {
  background-color: #8B8BC1;
  padding: 5px 8px;
  border-radius: 6px;
  font-size: 1.2rem;

  text-decoration: none;
  color: #fff;
  margin-bottom: 12px;
}

.grid-content .btn:hover {
  background-color: #48487c;
}

.grid .bg-color1 {
  background-color: #101417;
}
.grid .bg-color2 {
  background-color: #070a0f;
}

@media only screen and (min-width: 800px) {
  .lg-grid-large {
    grid-column: span 2;
  }

  .grid-content {
    grid-column: initial;
  }
}

@media only screen and (min-width: 1400px) {
  .grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .lg-grid-large {
    grid-column: initial;
  }
}

@media only screen and (max-width: 650px) {
  .grid {
    grid-template-columns: repeat(1, 1fr);
  }
  .grid-large {
    grid-column: initial;
  }

  .sm-order-1 {order: 1}
  .sm-order-2 {order: 2}
  .sm-order-3 {order: 3}
  .sm-order-4 {order: 4}
  .sm-order-5 {order: 5}
  .sm-order-6 {order: 6}
}