.container {
    margin-left: auto;
    margin-right: auto;
    max-width: var(--container-max-width);
    padding-left: var(--container-padding-desktop);
    padding-right: var(--container-padding-desktop);
  }

.main-container {
  padding-top: clamp(8rem, 7rem + 5.5vw, 10rem);
  padding-bottom: 5rem;
}

/* DESKTOP */
@media (max-width: 1024px) {
  .container {
    width: 100%;
    padding-left: var(--container-padding-desktop);
    padding-right: var(--container-padding-desktop);
  }
}

/* TABLET */
@media (max-width: 768px) {
  .container {
    width: 100%;
    padding-left: var(--container-padding-tablet);
    padding-right: var(--container-padding-tablet);
  }
}

/* MOBILE */
@media (max-width: 480px) {
  .container {
    width: 100%;
    padding-left: var(--container-padding-mobile);
    padding-right: var(--container-padding-mobile);
  }
}

.body-container {
  /*padding:2rem .5rem;*/
  padding-top: clamp(0rem, -0.73rem + 3.64vw, 2rem);
  padding-bottom: 2rem;
  padding-left: .25rem;
  padding-right: .25rem;
  display: block;
}

.footer {
  color: var(--gray-200);
  font-size: clamp(0.625rem, 0.58rem + 0.227vw, 0.75rem);
  letter-spacing: .0625rem;
  padding: 2rem 0;
  text-align: center;
}

/* COLUMNS */
.col-2,
.col-3 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: .25rem;
}

@media (min-width: 768px) {
  .col-2 {
    grid-template-columns: repeat(2, 1fr);
  }
  .col-3 {
    grid-template-columns: repeat(3, 1fr);
  }
}