index.css

@tailwind base;
@tailwind components;
@tailwind utilities;

body {
  font-family: 'Inter';
}

.body {
  max-width: calc(100vw - 20rem)
}

.res-max-w-custom {
  max-width: calc(100% - 144px);
}

.header {
  background-color: rgb(25,201,100);
  max-width: calc(100% - 25rem);
  margin: 0 auto;
}

.curated {
  overflow: scroll hidden;
}

.res-container {
  margin-bottom: 2rem;
}

.ft-container {
  display: flex;
  justify-content: flex-start;
  gap: 5rem;
  padding: 3rem calc(10% - 36px);
}

li {
  margin: 1rem 0;
}

.cards-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

@media (max-width: 954px) {
  .cards-container {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 728px) {
  .filter {
    flex-direction: column;
  }

  .ft-container {
    flex-direction: column;
    gap: 2rem;
    padding: 3rem 1rem;
  }

  .body {
    max-width: calc(100vw - 7rem);
  }

  .cards-container {
    grid-template-columns: repeat(1, 1fr);
  }

  .header {
    max-width: none;
  }
}

@media (max-width: 428px) {

  .body {
    max-width: calc(100vw - 2rem);
  }

  .cards-container {
    display: block;
  }

  .main-card {
    width: 100%;
    min-width: 0;
  }
}

.cards-main {
  --nextui-box-shadow-medium: 0
}