.kevel-ph {
    min-width: var(--kevel-ph-dw, 0);
    min-height: var(--kevel-ph-dh, 0);
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #f0f0f0;
}

@media (max-width: 1199px) {
    .kevel-ph {
        min-width: var(--kevel-ph-tw, 0);
        min-height: var(--kevel-ph-th, 0);
    }
}

@media (max-width: 719px) {
    .kevel-ph {
        min-width: var(--kevel-ph-mw, 0);
        min-height: var(--kevel-ph-mh, 0);
    }
}


.kevel-ph-loader {
    width: 25px;
    aspect-ratio: .75;
    --c: no-repeat linear-gradient(#000 0 0);
    background: 
      var(--c) 0%   50%,
      var(--c) 50%  50%,
      var(--c) 100% 50%;
    animation: kevel-ph-loader 1s infinite linear alternate;
  }
  @keyframes kevel-ph-loader {
    0%  {background-size: 20% 50% ,20% 50% ,20% 50% }
    20% {background-size: 20% 20% ,20% 50% ,20% 50% }
    40% {background-size: 20% 100%,20% 20% ,20% 50% }
    60% {background-size: 20% 50% ,20% 100%,20% 20% }
    80% {background-size: 20% 50% ,20% 50% ,20% 100%}
    100%{background-size: 20% 50% ,20% 50% ,20% 50% }
  }