*{
  margin: 0;
  box-sizing: border-box;
}
:root{
  --pink: #F7ACAA;
  --yellow: #F4E8A5;
  --beige: #f2f0e7;
  --green: #008056;
  --gray: #9F9B9B;
  --lightgray: #BAB9B9;
  --white: #FFFCFC;
  --black: #000000;
}
body{
  font-family: "Roboto", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-variation-settings:
    "wdth" 100;
}
.cardscontainer{
  display:  grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1rem;
}
@media screen and (min-width:769px) {
  body{
    background-color: beige;
  }
}
@media screen and (min-width:992px) and (max-width:1199px) {
  body{
    background-color: green;
  }
}
@media screen and (max-width:768px) {
  body{
    background-color: brown;
  }
}