/* 80% des Viewports */
.wrap {
  width: min(80vw, 1500px);
  margin: 0 auto;
  padding: 26px 22px;
}

.grid2 {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

@media (min-width: 980px) {
  .grid2 {
    grid-template-columns: 2.2fr 1fr;
  }
}

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 22px 22px;
  box-shadow: var(--shadow);
}

.notes {
  background: #fffaf0;
  border: 1px solid #ffe7b0;
  border-radius: var(--radius-lg);
  padding: 14px;
}

@media (max-width: 720px) {
  .wrap {
    width: 94vw;
    padding: 18px 14px;
  }
  .card{
    padding: 18px 16px;
  }
  h1{
    font-size: 22px;
  }
}