.grid-modern {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2rem;
  align-items: start;
}


:root {
  --primary-color: #007AFF;
  --secondary-color: #5856D6;
  --accent-color: #FF3B30;
  --success-color: #34C759;
  --warning-color: #FF9500;
  --error-color: #FF3B30;
  --info-color: #5AC8FA;
}


@container (min-width: 400px) {
  .card-responsive {
    padding: 2rem;
  }
}


.text-start {
  text-align: start;
}

.text-end {
  text-align: end;
}

.margin-inline-start {
  margin-inline-start: 1rem;
}

.margin-inline-end {
  margin-inline-end: 1rem;
}


.subgrid {
  display: grid;
  grid-template-columns: subgrid;
  grid-template-rows: subgrid;
}


@layer base, components, utilities;

@layer base {
  * {
    box-sizing: border-box;
  }
}

@layer components {
  .btn {
    padding: 0.5rem 1rem;
    border-radius: 0.25rem;
  }
}

@layer utilities {
  .text-center {
    text-align: center;
  }
}