main {
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;

  .cardSection {
    height: 100%;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 1rem 1.4rem;
    column-gap: 1rem;
  }

  .coloredCardDataSection {
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 1rem 1.4rem;
    row-gap: 1rem;
  }

  .soloCardSection {
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 0rem 1.4rem;
    border-bottom: solid 1px $solo-card-separation;
  }
  .footerSection {
    height: fit-content;
    width: 100%;
  }
}

// RESPONSIVE

@media screen and (min-width: 350px) {
  main {
    .footerSection {
      padding: 0rem 2rem;
    }
  }
}

@media screen and (max-width: 574px) {
  main {
    .cardSection {
      flex-direction: column;
      row-gap: 1rem;
      padding: 1rem 1.5rem;
    }
  }
}

@media screen and (min-width: 575px) {
  main {
    .cardSection {
      flex-direction: column;
      row-gap: 1.4rem;
      padding: 1rem;
      max-width: 520px;
    }

    .coloredCardDataSection {
      width: 560px;
      padding: 1rem 1.4rem;
    }
    .soloCardSection {
      width: 560px;
      padding: 0rem 1.5rem;
    }
  }
}

@media screen and (min-width: 765px) {
  main {
    .cardSection {
      flex-direction: row;
      justify-content: center;
      align-items: center;
      row-gap: 1rem;
      padding: 1rem 1.5rem;
      max-width: 770px;
    }
    .coloredCardDataSection {
      width: 700px;
      padding: 1rem 1rem;
    }
    .soloCardSection {
      width: 700px;
      padding: 0rem 1rem;
    }

    .footerSection {
      width: 700px;
    }
  }
}

@media screen and (min-width: 990px) {
  main {
    .cardSection {
      flex-direction: row;
      justify-content: center;
      align-items: center;
      padding: 1rem;
      max-width: 980px;
    }
    .coloredCardDataSection {
      flex-direction: row;
      width: 950px;
      column-gap: 1rem;
    }
    .soloCardSection {
      width: 950px;
      padding: 0rem 1rem;
    }
    .footerSection {
      width: 1000px;
    }
  }
}

@media screen and (min-width: 1200px) {
  main {
    .cardSection {
      max-width: 1170px;
    }
    .coloredCardDataSection {
      flex-direction: row;
      width: 1150px;
      column-gap: 1rem;
    }
    .soloCardSection {
      width: 1150px;
      padding: 0rem 1rem;
    }

    .footerSection {
      width: 1150px;
    }
  }
}

@media screen and (min-width: 1440px) {
  main {
    .cardSection {
      max-width: 1230px;
    }
    .coloredCardDataSection {
      flex-direction: row;
      width: 1250px;
      column-gap: 1rem;
    }

    .soloCardSection {
      width: 1250px;
      padding: 0rem 1rem;
    }

    .footerSection {
      width: 1250px;
    }
  }
}
