:root {
  --card-dark: #202842;
  --card-light: white;
}

*::before,
*::after,
* {
  box-sizing: border-box;
}

body {
  --background: #f4f2fd;

  display: grid;
  margin: 0;
  place-content: center;
  min-height: 100vh;
  font-family: "Work Sans", sans-serif;
  background-color: var(--background);
  color: hsl(0, 0%, 14%);
}

span {
  display: block;
  font-size: 1.2em;
  font-weight: 600;
}

i {
  margin-right: 0.5em;
}

ul {
  padding: 0;
  list-style: none;
}

main {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.card {
  --corner-radius: 10px;

  position: relative;
  padding: 2em 4em 5em 4em;
  height: 80vh;
  border-radius: var(--corner-radius);
  box-shadow: 4px 12px 20px hsl(0, 0%, 82%);
}

.card__subtext {
  font-size: 1em;
}

.card__price {
  font-size: 3em;
  font-weight: 600;
}

.card p {
  color: hsl(0, 0%, 52%);
}

.card__contents {
  margin-top: 3.5em;
}

.card__contents li {
  margin-bottom: 0.75em;
}

.card__btn {
  --corner-radius: 50px;

  position: absolute;
  padding: 0.7em 3em;
  border: none;
  bottom: 2em;
  font-family: inherit;
  font-size: 16px;
  font-weight: 600;
  border-radius: var(--corner-radius);
  cursor: pointer;
}

.card--light {
  margin-right: 4em;
  background-color: var(--card-light);
}

.card--light span {
  color: black;
}

.card--dark {
  background-color: var(--card-dark);
  color: white;
}

.card--dark span {
  color: white;
}

.card--light .card__btn {
  background-color: var(--card-dark);
  color: white;
}

.card--dark .card__btn {
  background-color: white;
  color: var(--card-dark);
}

.card__btn-wrapper {
  display: flex;
  justify-content: center;
}

@media screen and (max-width: 768px) {
  main {
    margin: 1em 0;
  }

  .card--light {
    margin: 0 0 2em 0;
  }
}