@import url("https://fonts.googleapis.com/css2?family=Big+Shoulders+Display:wght@700&family=Lexend+Deca&display=swap");

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

:root {
  /* Primary colors. */
  --clr-bright-orange: hsl(31, 77%, 52%);
  --clr-dark-cyan: hsl(184, 100%, 22%);
  --clr-very-dark-cyan: hsl(179, 100%, 13%);
  /* Neutral colors. */
  --clr-transparent-white: hsla(0, 0%, 100%, 0.75);
  --clr-very-light-gray: hsl(0, 0%, 95%);
  /* Attribution colors. */
  --clr-brandeis-blue: hsl(212, 95%, 48%);
  /* Fonts. */
  --ff-primary: "Lexend Deca", sans-serif;
  --ff-headings: "Big Shoulders Display", cursive;
}

body {
  min-height: 100vh;
  background-color: var(--clr-very-light-gray);
  display: flex;
  flex-direction: column;
}

.column-preview-card {
  max-width: 327px;
  margin: 1rem auto;
}

.car-column {
  padding: 3rem 3.0625rem;
}

.car-column img {
  width: 34%;
}

.car-column h1 {
  color: var(--clr-very-light-gray);
  font-family: var(--ff-headings);
  font-weight: 700;
  font-size: 2.5rem;
  line-height: 3rem;
  margin-top: 2.1875rem;
  margin-bottom: 1.5625rem;
  text-transform: uppercase;
}

.car-column p {
  color: var(--clr-transparent-white);
  font-family: var(--ff-primary);
  font-weight: 400;
  font-size: 0.9375rem;
  line-height: 1.5625rem;
  margin-bottom: 1.5625rem;
  text-align: start;
}

.car-column button {
  width: 65%;
  background-color: var(--clr-very-light-gray);
  border-radius: 1.5625rem;
  font-family: var(--ff-primary);
  font-weight: 400;
  font-size: 0.9375rem;
  line-height: 1.5625rem;
  padding: 0.75rem;
  text-align: center;
}

.car-column button:hover {
  background-color: transparent;
  border: 2px solid var(--clr-very-light-gray);
  cursor: pointer;
  /*
   * To make it look the same,
   * you have to substract the border width (2px)
   * from the button's padding.
   * Therfore: calc(0.75rem - 2px).
  */
  padding: calc(0.75rem - 2px);
}

.car-column button:active {
  transform: translateY(2px);
}

.sedans {
  background-color: var(--clr-bright-orange);
  border-radius: 0.5rem 0.5rem 0 0;
}

.sedans button {
  color: var(--clr-bright-orange);
}

.sedans button:hover {
  color: var(--clr-very-light-gray);
}

.suvs {
  background-color: var(--clr-dark-cyan);
}

.suvs button {
  color: var(--clr-dark-cyan);
}

.suvs button:hover {
  color: var(--clr-very-light-gray);
}

.luxury {
  background-color: var(--clr-very-dark-cyan);
  border-radius: 0 0 0.5rem 0.5rem;
}

.luxury button {
  color: var(--clr-very-dark-cyan);
}

.luxury button:hover {
  color: var(--clr-very-light-gray);
}

.attribution {
  color: black;
  font-family: var(--ff-primary);
  font-size: 0.75rem;
  margin-top: 1rem;
  margin-bottom: 1rem;
  text-align: center;
}

.attribution a {
  color: var(--clr-bright-orange);
  text-decoration: none;
}

.attribution a:hover {
  color: var(--clr-brandeis-blue);
}

/* Desktop media query. */

@media screen and (min-width: 960px) {
  .column-preview-card {
    max-width: 921px;
    margin: auto;
    display: flex;
    flex-direction: row;
  }

  .sedans {
    border-radius: 0.5rem 0 0 0.5rem;
  }

  .luxury {
    border-radius: 0 0.5rem 0.5rem 0;
  }

  .car-column {
    max-width: 307px;
    padding: 3rem;
  }

  .car-column img {
    width: 30%;
  }

  .car-column h1 {
    font-size: 2.5rem;
    line-height: 3rem;
    margin-top: 2.1875rem;
    margin-bottom: 1.5625rem;
  }

  .car-column p {
    font-size: 0.9375rem;
    line-height: 1.5625rem;
    margin-bottom: 5.1875rem;
  }

  .car-column button {
    width: 70%;
    border-radius: 1.5625rem;
    font-size: 0.9375rem;
    line-height: 1.5625rem;
    padding: 0.75rem;
  }

  .car-column button:hover {
    /*
     * To make it look the same,
     * you have to substract the border width (2px)
     * from the button's padding.
     * Therfore: calc(0.75rem - 2px).
    */
    padding: calc(0.75rem - 2px);
  }
}