.has-before {
  position: relative;
}

.has-before::before, .has-before::after {
  content: '';
  height: .25vh;
  width: 25vw;
  background-color: var(--primary-trans-50);
  position: absolute;
  top: 50%;
  transform: translateY(50%);
  animation: width 4s forwards;
}

.has-before::before {
  left:0;
}

.has-before::after {
  right: 0;
}

.has-svg {
  --width: 2rem;
  position: relative;
  
}

.has-svg::before, .has-svg::after {
  content: '';
  position: absolute;
  height: var(--width);
  width: var(--width);
  background-image: url('https://c160-13429f5a581a.wptiger.fr/wp-content/uploads/2024/12/motif.svg');
  background-size: contain;
  background-repeat: no-repeat;
  animation: heartbeat 5s ease-in-out infinite alternate;
  top: 0;
  bottom: 0;
  margin: auto;
}

.has-svg::before {
   left: calc(calc(var(--width) + calc(var(--at-grid-gap) / 2)) * -1);
}

.has-svg::after {
   right: calc(calc(var(--width) + calc(var(--at-grid-gap) / 2)) * -1);
}