@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;700&family=Poppins:wght@400;500;600;700&display=swap');

* {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
   font-family: 'Montserrat', sans-serif;
}
body {
   padding: 0rem 1rem;
}
header {
   padding: 10px 15px;
   display: flex;
   justify-content: space-between;
   align-items: center;
}
header a {
   text-decoration: none;
}
/* Just for the fallback layout */
main {
   max-width: 500px;
   margin: 0 auto;
}

article {
   margin: 1rem 0;
}

/* Now let's do a Grid-based layout */
@supports (display: grid) {
   main {
      max-width: 10000px;
      margin: 0;
   }

   article {
      margin: 0;
   }

   .deals {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
      grid-gap: 1rem;
   }
}


.deals {
   font-family: Avenir, Roboto, Arial, Helvetica, sans-serif;
   font-size: 80%;
}

.sale-item {
   display: flex;
   flex-flow: column;
   border: 1px solid black;
   border-radius: 1rem;
   padding: 2rem;
}

.sale-item > h1 {
   margin: 1rem 1rem 0;
}

.sale-item > ul {
   margin: 0 0 1rem;
}

.sale-item > p {
   margin: 0.25em 1rem 1rem;
}

.sale-item > img {
   order: -1;
   align-self: center;
}

.sale-item > button {
   margin-top: auto;
   background: teal;
   color: white;
   padding: 0.5rem;
   border: none;
   border-radius: 1rem;
   font-size: 1.2rem;
}