@import "../_variables.css";

.flip-card {
  perspective: 76.923rem;
  position: relative;
  width: 100%;
  min-height: 25.846rem;
}

 .flip-card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    transition: transform 0.6s;
    transform-style: preserve-3d;
  }

  .flip-card:hover .flip-card-inner {
    transform: rotateY(180deg);
  }

  .flip-card-front,
  .flip-card-back {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    border-radius: 0.923rem;
    overflow: hidden;
  }

  .flip-card-back {
    padding: 24px;
  }

  .flip-card-back-title {
      font-weight: var(--font-bold);
      font-size: 20px;
      color: rgba(255, 255, 255, 1);
  }

  .flip-card-back-position {
      margin-top: 4px;
      font-weight: var(--font-normal);
      font-size: var(--font-size-14);
      color: rgba(255, 255, 255, 1);
  }

  .flip-card-back p {
      margin-top: 30px;
      font-weight: var(--font-normal);
      font-size: var(--font-size-12);
      color: rgba(255, 255, 255, 1);
  }

  .flip-card-back-link {
      gap: 0.846rem;
  }

  .flip-card-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .flip-card-overlay {
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) -5.9%, rgba(0, 0, 0, 0.6) 100%);
    text-align: center;
    visibility: visible;
  }

  .flip-card:hover .flip-card-overlay {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
  }

  .flip-card-back {
    transform: rotateY(180deg);
  }

  .gradient-bg {
    background: linear-gradient(252.65deg, #E5052C 8.18%, #250E45 91.82%);
  }