.panel-layout {
  display: flex;
  flex-wrap: wrap;
}

.panel-layout .panel {
  width: 300px;
  margin: 16px;
  padding: 8px;
  min-height: 200px;
  position: relative;
}

@property --rotate {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}

@keyframes gradient {

  0% {
    --rotate: 0deg;
  }
  100% {
    --rotate: 360deg;
  }
}

.panel-layout .panel .panel-wrapper {
  position: absolute;
  background-image: linear-gradient( var(--rotate, 0deg), #ff0f7b 10%, #f89b29 100%);
  left: 0;
  top: 0;
  bottom: 0;
  border-radius: 8px;
  right: 0;
  z-index: 1;
}
.panel-layout .panel .panel-wrapper::before {
  content: "";
  background: #222;
  position: absolute;
  left: 2px;
  top: 2px;
  bottom: 2px;
  right: 2px;
  border-radius: 8px;
  z-index: 1;
}

.panel-layout .panel:hover .panel-wrapper {
  animation: gradient 3s linear infinite;
  box-shadow: 0px 0px 8px rgba(150, 150, 150, .7) ;
}
.panel-layout .panel .image {
  width: 100%;
  position: relative;
  height: 120px;
  border-radius: 8px;
  margin: 0;
  padding: 0;
  background-size: cover;
  background-position-x: center;
  background-position-y: center;
  z-index: 2;
}

.panel-layout .panel .name {
  position: relative;
  z-index: 2;
}