\* {

  box-sizing: border-box;

}

h1, h2, p {

  text-align: center;

}

p {

  margin: 2px auto;

  font-size: 1.2rem;

  font-weight: 800;

}

h2 {

  margin-bottom: 10px;

}

hr {

  border: none;

  border-bottom: 1px solid black;

  width: 60%;

}

.pricing-container {

  width: 80%;

  display: flex;

  flex-wrap: wrap;

  border: 2px solid black;

  gap: 20px;

  margin: auto;

}

.pricing-card {

  display: flex;

  flex-direction: column;

  flex: 0 0 200px;

  justify-content: space-between;

  border: 2px solid black;

  margin: 0 20px;

  border-radius: 5px;

  transition: transform 0.3s ease;

}

.basic-plan, .premium-plan {

  padding: 10px;

  background-color: whitesmoke;

}

.pro-plan {

  background-color: lightblue;
  order: 1;
  flex-grow: 2;

}

ul {

  list-style-position: inside;

  list-style-type: square;

}

li.green::marker{

  color: green;

  font-size: 1.5rem;

  font-weight: 800;

}

li.red::marker{

  color: crimson;

  font-size: 1.5rem;

  font-weight: 800;

}

button {

  background-color: yellow;

  font-size: 1rem;

  font-weight: bold;

  border: 1px solid black;

  margin: 10px;

  border-radius: 10px;

  cursor: pointer;

}

.basic-plan {

  order: 0;

}

.premium-plan {

  order: 2;

}

.pricing-card:hover {

  transform: scale(1.1);

}