@import url("https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Karla:ital,wght@0,200..800;1,200..800&display=swap");

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

:root {
  --main-bg: #e7eef6;
  --primary-text: hsl(71, 73%, 54%);
  --card-bg: hsl(179, 62%, 43%);
  --sub-card-text: hsl(204, 43%, 93%);
  --main-text-color: hsl(218, 22%, 67%);
  --second-card-bg: #4abebd;
  --radius: 8px;
}

body {
  display: flex;
  flex-direction: column;
  justify-items: center;
  text-align: left;
  width: 100vw;
  height: 100vh;
  background: var(--main-bg);
  font-family: "Inter", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  /* font-style: normal; */
}

main {
  margin: auto;
  display: grid;
  grid-template: 1.25fr 0.75fr 1.25fr/ 100%;
  /* gap: 3rem; */
  width: 18.6rem;
}
.title {
  font-size: large;
  font-weight: 500;
}
main .information {
  border-radius: var(--radius) var(--radius) 0 0;
  background: white;
  padding: 2rem 1rem 0.5rem 1rem;
  color: var(--main-text-color);
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.title-1 {
  color: var(--card-bg);
}

.guarantee {
  font-size: small;
  color: var(--primary-text);
  font-weight: 500;
}
.information-text {
  font-size: small;
  line-height: 1.5rem;
}

.price {
  text-align: left;
  background: var(--card-bg);
  color: white;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1.5rem 1rem 1rem 1rem;
  height: 100%;
  /* align-items: flex-start; */
}

.title-2 {
  font-size: medium;
}

.price-text {
  font-size: 1.8em;
  display: flex;
  gap: 0.5rem;
  align-items: center;
}

.price-text span {
  font-size: small;
  font-weight: 100;
}

.access-information {
  font-size: small;
  word-spacing: 0.3em;
  font-weight: 300;
  margin-bottom: 0.5rem;
}

.btn {
  background: var(--primary-text);
  width: 100%;
  height: 3rem;
  display: flex;
  justify-content: center;
  align-items: center;
  text-decoration: none;
  color: white;
  border-radius: 0.5em;
}

.advantages {
  display: flex;
  color: white;
  background: var(--second-card-bg);
  flex-direction: column;
  font-size: 0.8rem;
  word-spacing: 0.1em;
  gap: 1rem;
  border-radius: 0 0 var(--radius) var(--radius);
  padding: 1.5rem 1rem 1rem 1rem;
  font-weight: 200;
  height: fit-content;
}
.title-3 {
  font-weight: 500;
}
.advantages p {
  line-height: 1.5em;
}
/* footer */
footer {
  font-size: 0.8rem;
  text-align: center;
  background: var(--second-card-bg);
}
footer a {
  color: hsl(228, 45%, 44%);
}

@media (min-width: 50rem) {
  main {
    grid-template: repeat(2, 50%) / repeat(2, 50%);
    width: 37rem;
  }
  .information {
    grid-area: 1 / 1 / 2 / 3;
    display: flex;
    gap: 1rem;
  }
  .information-text {
    width: calc(100% - 5rem);
  }
  .price {
    border-radius: 0 0 0 var(--radius);
    padding: 2rem;
  }
  .advantages {
    height: 100%;
    border-radius: 0 0 var(--radius) 0;
  }
  .btn {
    height: 6rem;
  }
}