index.css

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

img {
  width: 100%;
  height: 76%;
  object-fit: cover;
  margin-bottom: 4%;
}

body {
  background-color: rgb(22, 22, 22);
}

#root {
  padding: 2%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-evenly;
  /* align-content: center; */
}

.card {
  display: flex;
  flex-direction: column;
  /* border: 1px solid blue; */
  box-shadow: 10px 10px 5px rgba(0, 0, 0, 0.589);
  height: 68vh;
  width: 27vw;
  margin: 2% 0% 0% 0%;
}

.card:hover {
  box-shadow: 10px 10px 5px rgba(0, 75, 52, 0.589);
}

.card__category {
  /* border: 1px solid teal; */
  letter-spacing: 1px;
  font-size: 83%;
  color: rgba(255, 255, 255, 0.432);
  margin: 0% 0% 0% 4%;
}

.card__title {
  /* border: 1px solid salmon; */
  margin: 2% 0% 2% 4%;
  color: white;
  letter-spacing: 2px;
  font-size: 130%;
}

button {
  border: 1px solid green;
  margin: 0% 0% 0% 4%;
  border: none;
  padding: 1%;
  font-size: 80%;
  background-color: rgb(12, 12, 12);
  color: white;
  padding: 2%;
  letter-spacing: .5px;
}

button:hover {
  background-color: white;
  color: rgb(12, 12, 12);
}