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

body {
  min-height: 100vh;
  font-family: "Lexend Deca", sans-serif;
  font-size: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' version='1.1' xmlns:xlink='http://www.w3.org/1999/xlink' xmlns:svgjs='http://svgjs.com/svgjs' width='3000' height='500' preserveAspectRatio='none' viewBox='0 0 3000 500'%3e%3cg mask='url(%26quot%3b%23SvgjsMask1070%26quot%3b)' fill='none'%3e%3crect width='3000' height='500' x='0' y='0' fill='rgba(0%2c 66%2c 65%2c 1)'%3e%3c/rect%3e%3cpath d='M0%2c709.782C135.776%2c724.091%2c269.046%2c671.036%2c386.282%2c601.067C506.278%2c529.451%2c631.042%2c440.745%2c673.735%2c307.684C715.37%2c177.922%2c646.635%2c43.137%2c607.147%2c-87.295C573.205%2c-199.409%2c513.183%2c-294.198%2c459.931%2c-398.533C387.548%2c-540.351%2c388.942%2c-759.877%2c238.001%2c-810.556C88.908%2c-860.614%2c-29.8%2c-659.675%2c-180.119%2c-613.43C-327.487%2c-568.093%2c-531.683%2c-664.562%2c-627.976%2c-544.145C-725.383%2c-422.334%2c-606.64%2c-242.365%2c-601.498%2c-86.482C-597.449%2c36.251%2c-649.695%2c161.734%2c-600.974%2c274.455C-551.892%2c388.012%2c-437.465%2c452.243%2c-337.278%2c524.815C-231.29%2c601.589%2c-130.152%2c696.066%2c0%2c709.782' fill='%23003534'%3e%3c/path%3e%3cpath d='M3000 1489.088C3194.926 1486.571 3413.382 1500.306 3561.124 1373.126 3706.333 1248.126 3696.5950000000003 1026.6390000000001 3750.725 842.844 3796.584 687.133 3855.744 539.467 3854.452 377.148 3853.009 195.928 3838.65 10.146999999999991 3742.869-143.70000000000005 3638.5969999999998-311.18600000000004 3487.546-460.148 3298.351-516.089 3109.031-572.067 2902.297-526.7439999999999 2722.395-445.43499999999995 2556.343-370.385 2443.835-222.72799999999995 2331.616-79.15800000000002 2224.624 57.72399999999999 2088.708 194.887 2086.115 368.603 2083.577 538.6659999999999 2264.0190000000002 650.1320000000001 2318.324 811.3109999999999 2382.0950000000003 1000.5840000000001 2287.8540000000003 1246.913 2429.487 1387.7359999999999 2569.286 1526.735 2802.875 1491.633 3000 1489.088' fill='%23004f4e'%3e%3c/path%3e%3c/g%3e%3cdefs%3e%3cmask id='SvgjsMask1070'%3e%3crect width='3000' height='500' fill='white'%3e%3c/rect%3e%3c/mask%3e%3c/defs%3e%3c/svg%3e");
  background-size: cover;
  background-repeat: no-repeat;
}
a {
  text-decoration: none;
  color: rgb(24, 165, 175);
}
.grid-container {
  margin: 2rem;
  display: grid;
  grid-template-columns: repeat(3, 270px);
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0px 0px 50px #000;
}

.card {
  padding: 2rem 2rem;
  display: flex;
  align-items: flex-start;
  justify-content: space-evenly;
  flex-direction: column;
  gap: 2rem;
  color: hsl(0deg, 0%, 95%);
  border: none;
}

.title_card {
  font-size: 45px;
  font-family: "Big Shoulders Display", cursive;
  letter-spacing: 2px;
}

.info_card {
  color: hsla(0deg, 0%, 100%, 0.75);
  font-weight: lighter;
  font-size: 14px;
  margin-bottom: 3rem;
}

.btn_card {
  font-size: 15px;
  font-weight: bold;
  border: 2px solid hsl(0deg, 0%, 95%);
  padding: 0.9rem 1.7rem;
  background: transparent;
  border-radius: 50px;
  color: hsl(0deg, 0%, 95%);
  transition: 0.5s;
}
#sedans {
  background-color: #e38826;
}

#suvs {
  background-color: #006970;
}

#luxury {
  background-color: #004241;
}
.attribution {
  font-size: 15px;
  text-align: center;
  margin: 20px;
  color: white;
}
.card .btn_card:hover {
  cursor: pointer;
  transform: translate(5px, -5px);
  box-shadow: -5px 5px 0 hsl(0deg, 0%, 95%);
}
@media (max-width: 815px) {
  .grid-container {
    grid-template-columns: repeat(auto-fit, minmax(90px, 270px));
  }
}