@import url('https://fonts.googleapis.com/css2?family=Big+Shoulders+Display:wght@700&family=Lexend+Deca&display=swap');
:root {
  /*Primary colors*/
  --bright-orange: hsl(31, 77%, 52%);
  --dark-cyan: hsl(184, 100%, 22%);
  --very-dark-cyan: hsl(179, 100%, 13%);
  /*Neutral colors*/
  --transparent-white: hsla(0, 0%, 100%, 0.75);
  --very-light-gray: hsl(0, 0%, 95%);
  /*typography*/
  --lexend-deca: 'Lexend Deca', serif;
  --big-shoulders-display: 'Big Shoulders Display', serif;
  --layout-padding: 2rem;
  --img-margin: 1.5rem;
  --margin-bottom: 1rem;
  --fs-body: 15px;
}

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

body {
  font-family: var(--lexend-deca);
  font-size: var(--fs-body);
  background-color: var(--very-light-gray);
}

.wrapper {
  padding: 2rem;
}
.card-container {
  padding: 2rem 1rem;
  color: var();
  line-height: 1.6;
}

.sedan {
  background: var(--bright-orange);
  border-radius: 1rem 1rem 0 0;
}

.card {
  padding: var(--layout-padding);
  /*border: 2px solid orangered;*/
}

img {
  padding-bottom: 1.5rem;
}

h3 {
  font-family: var(--big-shoulders-display);
  font-size: var(--layout-padding);
  color: var(--very-light-gray);
  text-transform: uppercase;
  margin-bottom: 0.8rem;
}

p {
  color: var(--transparent-white);
  margin-bottom: var(--img-margin);
}

button {
  border: 2px solid var(--very-light-gray);
  font: inherit;
  padding: 0.4rem 1.2rem;
  border-radius: var(--layout-padding);
  margin-bottom: 0.5rem;
}

.sedan .btn {
  color: var(--bright-orange);
}

.sedan .btn:hover {
  background: var(--bright-orange);
  color: var(--transparent-white);
}

.suv {
  background: var(--dark-cyan);
}

.suv .btn {
  color: var(--dark-cyan);
}

.suv .btn:hover {
  background: var(--dark-cyan);
  color: var(--transparent-white);
}

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

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

.luxury .btn:hover {
  background: var(--very-dark-cyan);
  color: var(--transparent-white);
}

.card-container .luxury {
  background: var(--very-dark-cyan);
}

/*Responsiveness*/
@media (min-width: 768px) {
  
  body {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    height: 100svh;
  }
  .card-container {
    display: flex;
    align-items: center;
    width: 65rem;
  }
  
  .card {
    flex: 1;
  }
  
  p {
    padding-bottom: var(--layout-padding);
  }
  .sedan {
    border-radius: 1rem 0 0 1rem;
  }
  
  .luxury {
    border-radius: 0 1rem 1rem 0;
  }
}



.attribution {
  font-size: 11px; text-align: center;
}
.attribution a {
  color: hsl(228, 45%, 44%);
}