#card-section {
  margin-top: 35px;
  margin-bottom: 35px;
}


#card-section .card-photo {
  background-image: url(../../assets/image/lighthouse.jpg);
  background-position: 100% 100%;
  width: 50vw;
  height: 50vh;
  background-size: cover;
  margin: auto;
  border-radius: 20px;
  margin-bottom: 35px;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 10px;
  color: rgba(0,0,0,0);
}
#card-section .card-photo div {
  padding: 20px;
  text-align: justify;
  transform: scaleX(-1);
  transition: linear;
  font-family: "Arial", sans-serif;
  font-size: 1.8rem;
  font-weight: 600;
}
#card-section .card-photo:hover, #card-section .card-photo:focus {
  box-shadow: 10px 10px 5px grey;
  transform: scale(1.1) scaleX(-1);
  background: darkgreen;
  color: silver;
  transition: 0.9s linear 0.3s;
}


#card-section .three-card {
  padding: 30px;
  display: flex;
  justify-content: center;
  gap: 30px;
}
div.card {
  width: 50px;
  height: 50px;
  background-color: snow;
  border-radius: 25px;
  box-shadow: 0px 0px 15px lightblue;
}
div.card:hover {
  transform: scale(1.3);
  box-shadow: inset 0px 0px 15px lightblue;
  transition: transform 0.5s ease;
  display: flex;
  justify-content: center;
  align-items: center;
}
.card::before {
  content: "";
}
.card.one:hover::after {
  content: "👍";
  font-size: 1.5rem;
}
.card.two:hover::after {
  content: "🤩";
  font-size: 1.5rem;
}
.card.three:hover::after {
  content: "🤮";
  font-size: 1.5rem;
}