/* Start FontFace */
@font-face {
  font-family: "Karla";
  src: url("../assets/fonts/Karla/Karla-Regular.ttf");
  font-style: normal;
  font-display: swap;
  font-weight: 400;
}
@font-face {
  font-family: "Karla";
  src: url("../assets/fonts/Karla/Karla-Bold.ttf");
  font-style: oblique;
  font-display: swap;
  font-weight: 700;
}
/* End FontFace */
/* Start Variables */
:root {
  /* Colors */
  /** Primary **/
  --Teal-500: hsl(179, 62%, 43%);
  --Green-400: hsl(71, 73%, 54%);
  /** Neutral **/
  --Teal-100: hsl(204, 43%, 93%);
  --Gray-500: hsl(218, 22%, 67%);
  /** New **/
  --White: hsl(0, 0%, 100%);
  --Teal-500-light: hsl(179, 47%, 52%);

  /* Typography */
  /** rem **/
  font-size: 16px;
  /** FontFamily **/
  font-family: "Karla", Arial;

  /* Sizing */
  --main-sizing: 100px;
}
/* End Variables */

* {
  margin: 0;
}
body {
  margin: calc(var(--main-sizing) / 1.5) calc(var(--main-sizing) / 4);
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: var(--Teal-100);
}
.cardsContainer {
  display: grid;
  grid-template-columns: repeat(1, minmax(auto, 310px));
  width: 100%;
  justify-content: center;
}
.card {
  padding: calc(var(--main-sizing) / 4.5);
  background-color: var(--card-color);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.5rem;
  max-width: 280px;
}
.card:nth-of-type(1) h1 {
  color: var(--Teal-500);
  font-size: 1.3rem;
}
.card:nth-of-type(1) h2 {
  color: var(--Green-400);
  font-size: 1rem;
}
.card:nth-of-type(1) p {
  color: var(--Gray-500);
  line-height: 1.8;
  font-size: 0.87rem;
  margin-bottom: 1rem;
}
.card:nth-of-type(2),
.card:nth-of-type(3) {
  color: var(--White);
}
.card:nth-of-type(2) h2,
.card:nth-of-type(3) h2 {
  font-size: 1.2rem;
}
.card:nth-of-type(2) .price {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.5rem 1rem;
  align-items: center;
}
.card:nth-of-type(2) .price h3 {
  font-size: 2rem;
}
.card:nth-of-type(2) .price span {
  opacity: 0.7;
}
.card:nth-of-type(2) .price p {
  grid-area: 2 / 1 / 3 / 3;
}
.card:nth-of-type(2) button {
  border: 0;
  padding: 1rem;
  width: 100%;
  border-radius: 0.4rem;
  background-color: var(--Green-400);
  color: var(--White);
  font-size: 1rem;
  font-family: "Karla", Arial;
  cursor: pointer;
  box-shadow: 0px 5px 12px 0px #0000005e;
  margin-top: 1rem;
}
.card:nth-of-type(3) ul {
  list-style: none;
  padding: 0;
  opacity: 0.8;
  line-height: 1.5;
  font-size: 0.9rem;
}
.card:nth-of-type(3) ul li {
  cursor: pointer;
}
.card:nth-of-type(1) {
  --card-color: #ffffff;
  border-radius: 0.5rem 0.5rem 0 0;
}
.card:nth-of-type(2) {
  --card-color: var(--Teal-500);
}
.card:nth-of-type(3) {
  --card-color: var(--Teal-500-light);
  border-radius: 0 0 0.5rem 0.5rem;
}
@media (min-width: 685px) {
  body {
    margin: 0;
  }
  .cardsContainer {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    grid-template-columns: repeat(2, minmax(auto, 310px));
  }
  .card {
    border-radius: 0 !important;
    padding: 2rem;
  }
  .card:nth-of-type(1) {
    grid-column: 2 span;
    max-width: initial;
    width: 600px;
    border-radius: 0.5rem 0.5rem 0 0 !important;
  }
  .card:nth-of-type(2) {
    border-radius: 0 0 0 0.5rem !important;
  }
  .card:nth-of-type(3) {
    border-radius: 0 0 0.5rem 0 !important;
  }
}