@font-face {
  font-family: "Sen";
  src: url("./assets/fonts/Sen-VariableFont_wght.ttf") format("truetype");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: "Sen", sans-serif;
  font-size: 0.8rem;
}

.main-wrapper {
  display: grid;
  grid-template-rows: auto 1fr auto; 
  gap: 20px;
  min-height: 100vh;
  max-width: 1500px;
  padding: 0 15px;
  margin: 0 auto;
  & header,
  footer {
    width: 100%;
    max-height: 50px;
    overflow: hidden;
    text-align: center;
    background-color: #cb7ac8;
    font-size: 1.5rem;
    display: grid;
    place-items: center;
  }
  & main {
    display: grid;
    gap: 20px;
    grid-template-columns: minmax(200px, 400px) 1fr;
    & aside {
      background-color: #cb7ac8;
      max-height: 50%;
      padding: 15px;
      border-radius: 10px;
      overflow-y: auto;
      & h1 {
        font-size: 1.5rem;
        margin-bottom: 10px;
      }
    }
    & .cards-wrapper {
      display: grid;
      gap: 10px;
      grid-template-columns: repeat(4, minmax(200px, 1fr));
      align-items: stretch;
      & .card {
        border: 1px solid #ddd;
        border-radius: 10px;
        padding: 15px;
        max-height: 200px;
        overflow-y: auto;
        & h2 {
          font-size: 1.25rem;
          margin-bottom: 10px;
        }
        & p {
          font-size: 0.9rem;
        }
      }
    }
  }
}
@media (max-width: 1024px) {
    .main-wrapper main {
        grid-template-columns: 1fr; 
        & aside {
            max-height: 100px; 
        }
        & .cards-wrapper {
            grid-template-columns: repeat(3, 1fr); 
        }
    }
}
@media (max-width: 768px) {
    .main-wrapper main {
        & .cards-wrapper {
            grid-template-columns: repeat(2, 1fr); 
        }
    }
}