.services-container {
  display: flex;
  flex-wrap: wrap;
  gap: 2%;
  place-items: center center;
  place-content: center center;
}

.scene {
  width: 346px;
  height: 440px;
  perspective: 500px;
  margin-bottom: 2%;
}

.card {
  width: 100%;
  height: 100%;
  position: relative;
  cursor: pointer;
}

.card h3 {
    color: black;
}

.card__inner {
  width: 100%;
  height: 100%;
  position: relative;
  transition: transform 1s;
  transform-style: preserve-3d;
  box-shadow: inset 0px 0px 6px rgba(0, 0, 0, 0.25);
  border-radius: 9px;
}

.card.is-flipped .card__inner {
  transform: rotateY(180deg);
}

.card__face {
  position: absolute;
  height: 100%;
  width: 100%;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden; /* Für Safari */
  top: 0;
  left: 0;
  border-radius: 9px;
  overflow: hidden;
}

.card__face--front {
  display: flex;
  flex-direction: column;
  align-items: center;
  transform: rotateY(0deg);
}

.card__face--front .text-area {
  width: 90%;
  text-align: center;
}

.card__face--front .text-area h2 {
  font-family: "Cinzel", serif;
  font-weight: bold;
  font-size: 24px;
  margin-top: 10px;
}

.card__face--front .text-area hr {
  width: 80%;
  height: 3px;
  background: #A4B1A0;
  border: none;
}

.card__face--front .text-area p {
  font-family: "Lato", sans-serif;
  font-style: normal;
  font-weight: 300;
  font-size: 14px;
  line-height: 22px;
}

.card__face--front img {
  margin-top: 15px;
  width: 90%;
  border-radius: 9px;
}

.card__face--back {
  transform: rotateY(180deg);
  align-items: center;
    display: flex;
    flex-direction: column;
    padding-top: 10px;
}

.card__face--back h3 {
  font-family: "Cinzel", serif;
  font-style: normal;
  font-weight: bold;
  font-size: 14.8571px;
  line-height: 20px;
  margin-bottom: 0;
}

.card__face--back p {
  padding: 0 10%;
  font-family: "Lato", sans-serif;
  font-style: normal;
  font-weight: 300;
  font-size: 11.982px;
  line-height: 19px;
  align-self: flex-start;
}

.card__face--back p.price {
    align-self: center;
}

small {
  font-family: "Lato", sans-serif;
  font-style: normal;
  font-weight: 300;
  font-size: 12px;
  line-height: 22px;
  color: rgba(41, 41, 41, 0.6);
}

.card-button {
  position: absolute;
  display: inline-block;
  padding: 10px 20px;
  font-family: "Verdana", sans-serif;
  font-size: 14px;
  color: white;
  background-color: #801818;
  border: none;
  border-radius: 6px;
  text-decoration: none;
  text-align: center;
  transition: background-color 0.3s ease;
}

.card__face--front .card-button {
    bottom: 17px;
}

.card__face--back .card-button {
    bottom: 26px;
}

.card-button:hover {
  background-color: #cc2f2f;
}