:root {
  --Gold-500: hsl(31, 77%, 52%);
  --Cyan-800: hsl(184, 100%, 22%);
  --Green-950: hsl(179, 100%, 13%);
  --Transparent-white-paragraphs: hsla(0, 0%, 100%, 0.75);
  --Gray-100-background-headings-buttons: hsl(0, 0%, 95%);
  font-size: 15px;
  color: var(--Gray-100-background-headings-buttons);
}

/* body */
body {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  background-color: var(--Gray-100-background-headings-buttons);
}

/* main  */
main {
  width: 95%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 1.5rem;
}

/* card */
.card {
  display: grid;
  grid-template-rows: repeat(3, 1fr);
}

/* article X 3 */
.sedan,
.luxury,
.suv {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: flex-start;
  padding: 2rem 2.5rem;
  min-width: 140px;
  min-height: 240px;
  line-height: 1.5rem;
  /* letter-spacing: .1rem; */
}

/* sedan */
.sedan {
  background-color: var(--Gold-500);
  border-radius: 5px 5px 0 0;
}

/* suv */
.suv {
  background-color: var(--Cyan-800);
}

/* luxury */
.luxury {
  background-color: var(--Green-950);
  border-radius: 0 0 5px 5px;
}

/* button */
article button {
  padding: .6rem;
  padding-left: 1.3rem;
  padding-right: 1.3rem;
  border-radius: 20px;
  border: none;
  background-color: var(--Gray-100-background-headings-buttons);
  text-transform: capitalize;
  cursor: pointer;
  transition: .2s;
}

/* color for button */
.sedan .btn-sedan {
  border: 2px solid rgba(0, 0, 0, 0);
  color: var(--Gold-500);
}

.suv .btn-suv {
  border: 2px solid rgba(0, 0, 0, 0);
  color: var(--Cyan-800);
}

.luxury .btn-luxury {
  border: 2px solid rgba(0, 0, 0, 0);
  color: var(--Green-950);
}

/* hover for button */
.sedan .btn-sedan:hover {
  border: 2px solid var(--Gray-100-background-headings-buttons);
  color: var(--Gray-100-background-headings-buttons);
  background-color: var(--Gold-500);
}

.suv .btn-suv:hover {
  border: 2px solid var(--Gray-100-background-headings-buttons);
  color: var(--Gray-100-background-headings-buttons);
  background-color: var(--Cyan-800);
}

.luxury .btn-luxury:hover {
  border: 2px solid var(--Gray-100-background-headings-buttons);
  color: var(--Gray-100-background-headings-buttons);
  background-color: var(--Green-950);
}

/* font styling */
.card article h2 {
  font-family: 'Big Shoulders Display', sans-serif;
  text-transform: uppercase;
  color: var(--Transparent-white-paragraphs);
}
.card article p,
.card article button,
footer {
  font-family: 'Lexend Deca', sans-serif;
  color: var(--Transparent-white-paragraphs);
}
/* footer */
footer {
  margin: 1.5rem;
  margin-bottom: 1rem;
}

.attribution,
.attribution a {
  color: var(--Green-950);
  text-decoration: none;
  border-radius: 10px;
  transition: .2s;
  font-size: .8rem;
}

.attribution a {
  padding: .2rem;
}

.attribution a:hover {
  background-color: var(--Cyan-800);
  color: var(--Gray-100-background-headings-buttons);
}

/* responsive */
@media screen and (min-width: 576px) {
  body {
    height: 95vh;
  }

  main {
    width: 50%;
    min-width: 380px;
    height: 400px;
    margin-bottom: 1.5rem;
  }

  .card {
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(1, 1fr);
  }

  .sedan,
  .luxury,
  .suv {
    padding: 2rem;
    line-height: 1rem;
  }

  .sedan {
    border-radius: 5px 0 0 5px;
  }

  .luxury {
    border-radius: 0 5px 5px 0;
  }
}