@import url("https://fonts.googleapis.com/css2?family=Karla:wght@400;700&display=swap");
* {
  box-sizing: border-box;
  margin: 0;
}

body {
  background-color: hsl(204, 43%, 93%);
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: "Karla", sans-serif;
}

.grid {
  display: grid;
  grid-template-columns: 19.8125rem 19.875rem;
  grid-template-rows: 13.5rem 16.1875rem;
  background-color: #FFFFFF;
  border-radius: 8px;
  box-shadow: 0px 15px 30px rgba(0, 81, 171, 0.148847);
}

/*  Header  */
.header {
  grid-row: 1/2;
  grid-column: 1/-1;
  padding: 2.5em;
}

.header--heading {
  color: hsl(179, 62%, 43%);
  font-weight: 700;
  font-size: 1.5rem;
}

.header--subtitle {
  color: hsl(71, 73%, 54%);
  font-weight: 700;
  font-size: 1.125rem;
  margin-top: 1.5rem;
}

.header--text {
  color: hsl(218, 22%, 67%);
  line-height: 1.625rem;
  margin-top: 0.7rem;
}

/*  Main  */
.main {
  background-color: hsl(179, 62%, 43%);
  border-radius: 0 0 0 8px;
  color: hsl(204, 43%, 93%);
  display: flex;
  justify-content: center;
  align-items: center;
}

.main--heading {
  font-size: 1.125rem;
}

.main--price {
  margin-top: 1rem;
  font-size: 2rem;
  font-weight: 700;
}
.main--price span {
  font-weight: 400;
  font-size: 1rem;
  opacity: 0.5;
  margin-left: 1em;
}

.main--subtitle {
  font-size: 1rem;
  font-weight: 400;
  margin-top: 0.5rem;
}

.main--btn {
  background-color: hsl(71, 73%, 54%);
  color: hsl(204, 43%, 93%);
  font-weight: 700;
  font-size: 1rem;
  padding: 0.95em 5.55em;
  border: none;
  border-radius: 0.3125rem;
  box-shadow: 0px 10px 10px rgba(0, 0, 0, 0.0973011);
  margin-top: 1.625rem;
}
.main--btn:hover {
  cursor: pointer;
  opacity: 0.75;
}

/*  Aside  */
.aside {
  background-color: hsl(179, 62%, 43%);
  opacity: 0.85;
  border-radius: 0 0 8px 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 2.6em;
  color: hsl(204, 43%, 93%);
}
.aside h2 {
  font-weight: 700;
  font-size: 1.125rem;
}

.aside--list {
  list-style: none;
  padding: 0;
  margin-top: 1rem;
  font-weight: 400;
  font-size: 0.875rem;
  opacity: 0.75;
  line-height: 1.4em;
}

@media (max-width: 650px) {
  .grid {
    grid-template-columns: 19.45rem;
    grid-template-rows: 16rem repeat(2, 14.25rem);
    border-radius: 5px;
  }
  .header {
    margin: 0;
    padding: 1.58em;
  }
  .header--heading {
    font-size: 1.25rem;
  }
  .header--subtitle {
    font-size: 0.94rem;
  }
  .header--text {
    font-size: 0.875rem;
    letter-spacing: -0.175px;
  }
  .main {
    border-radius: 0;
  }
  .main--btn {
    padding: 0.95em 6.35em;
  }
  .aside {
    border-radius: 0 0 5px 5px;
    padding: 1.5em;
  }
}/*# sourceMappingURL=main.css.map */