style.css

body {  
  box-sizing: border-box;
  text-align: center;
  margin: 50px auto;
  font-family: 'Red Hat Display', sans-serif;
  background-image: url(images/pattern-background-desktop.svg);
  background-repeat: repeat-x;
  max-width: 450px;
  max-height: 900px;
  background-color: hsl(225, 100%, 94%)
}

p{
  font-size: 16px;
}

.card-container{
 background-color: white;
 border-radius: 15px;
 max-width: 450px;
}

.img img{
  border-radius: 15px 15px 0px 0px;
}

.order-summary{
  width: 80%;
  margin: auto;
}

.plan{
  display: grid;
  grid-auto-flow: column;
  width: 80%;
  margin: auto;
  background-color:hsl(225, 100%, 98%);
  border-radius: 20px;
}

.plan img{
  margin: auto;
}

.plan a{
  margin: auto;
}

.text{
  text-align: left;
}

.text h3{
  margin-bottom: 5px;
}

.text p{
  margin-top: 0px;
}

.change:hover{
  text-decoration: none;
}

.button{
  width: 80%;
  margin: 20px auto;
  background-color: hsl(245, 75%, 52%);
  border-radius: 10px;
  height: 40px;
  font-weight: 900;
}

.button:hover{
opacity: 0.5;
}

.button a{
  color: hsl(225, 100%, 94%);
  text-decoration: none;
}

.cancel-order{
  margin-bottom: 20px;
  height: 50px;
}

.cancel-order a{
  color:hsl(245, 75%, 52%);
  text-decoration: none;
}

.cancel-order a:hover{
  color: black;
}

footer{
  margin-top: 50px;
}

@media screen and (max-width: 600px) {

.card-container {
  width: 375px; 
  margin: auto;
}
.img img{
  width: 375px;
}
}