.hero .mask .heart {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-color: rgba(var(--primary-color-rgb), 0.75);
  animation: heartShake 5s cubic-bezier(0.36, 0.07, 0.19, 0.97) infinite;
  transform-origin: center;
  will-change: transform;
  /* mask heart */
  -webkit-mask: url("data:image/svg+xml;utf8, <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 33.8 30'> <path d='M23.6,0c-2.6,0-5,1.2-6.6,3.2C15.4,1.2,13,0,10.4,0C4.7,0,0,4.7,0,10.4 c0,11.1,16.9,19.2,16.9,19.2s16.9-8.1,16.9-19.2C33.8,4.7,29.1,0,23.6,0z' fill='white'/> </svg>") no-repeat center/contain;
  mask: url("data:image/svg+xml;utf8, <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 33.8 30'> <path d='M23.6,0c-2.6,0-5,1.2-6.6,3.2C15.4,1.2,13,0,10.4,0C4.7,0,0,4.7,0,10.4 c0,11.1,16.9,19.2,16.9,19.2s16.9-8.1,16.9-19.2C33.8,4.7,29.1,0,23.6,0z' fill='white'/> </svg>") no-repeat center/contain;
}
.hero .mask .heart .text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #fff;
  width: 80%;
}
.hero .mask .heart .text h2 span {
  display: inline-block;
  animation: heartbeat 1.8s infinite;
}
@media (max-width: 575px) {
  .hero .mask {
    width: 180px;
    height: 180px;
    top: 40%;
    left: 10%;
  }
  .hero .mask .text h1 {
    font-size: 0.9rem;
  }
  .hero .mask .text h2 {
    font-size: 0.8rem;
  }
  .hero .mask .text p {
    font-size: 0.6rem;
  }
}
@media (min-width: 576px) {
  .hero .mask {
    width: 200px;
    height: 200px;
    top: 40%;
    left: 20%;
  }
  .hero .mask .text h1 {
    font-size: 1rem;
  }
  .hero .mask .text h2 {
    font-size: 0.9rem;
  }
  .hero .mask .text p {
    font-size: 0.7rem;
  }
}
@media (min-width: 768px) {
  .hero .mask {
    width: 250px;
    height: 250px;
    top: 40%;
    left: 20%;
  }
  .hero .mask .text h1 {
    font-size: 1.3rem;
  }
  .hero .mask .text h2 {
    font-size: 1.1rem;
  }
  .hero .mask .text p {
    font-size: 0.9rem;
  }
}
@media (min-width: 992px) {
  .hero .mask {
    width: 300px;
    height: 300px;
    top: 40%;
    left: 20%;
  }
  .hero .mask .text h1 {
    font-size: 1.5rem;
  }
  .hero .mask .text h2 {
    font-size: 1.2rem;
  }
}
@media (min-width: 1200px) {
  .hero .mask {
    width: 350px;
    height: 350px;
    top: 40%;
    left: 20%;
  }
  .hero .mask .text h1 {
    font-size: 1.8rem;
  }
  .hero .mask .text h2 {
    font-size: 1.4rem;
  }
}
@media (min-width: 1400px) {
  .hero .mask {
    width: 400px;
    height: 400px;
    top: 50%;
    left: 20%;
  }
  .hero .mask .text h1 {
    font-size: 2rem;
  }
  .hero .mask .text h2 {
    font-size: 1.6rem;
  }
}
.hero img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@keyframes heartShake {
  0% {
    transform: translateX(0) rotate(0deg);
  }
  8% {
    transform: translateX(-8px) rotate(-1.6deg);
  }
  18% {
    transform: translateX(6px) rotate(1.2deg);
  }
  28% {
    transform: translateX(-5px) rotate(-1deg);
  }
  38% {
    transform: translateX(4px) rotate(0.8deg);
  }
  50% {
    transform: translateX(-3px) rotate(-0.6deg);
  }
  62% {
    transform: translateX(2px) rotate(0.4deg);
  }
  78% {
    transform: translateX(-1px) rotate(-0.2deg);
  }
  100% {
    transform: translateX(0) rotate(0deg);
  }
}/*# sourceMappingURL=style2.css.map */