@media only screen and (min-width: 1850px) {
  .selection .select-card {
    width: 400px;
    height: 400px;
  }
}

.selection .card {
  display: inline-flex;
}

.selection .card h1 {
  text-wrap: nowrap;
}

.select-cards {
  /* border: 1px solid red; */
  width: 90%;
  display: flex;
  flex-direction: row;
  justify-self: center;
  align-self: center;
  /* justify-content: space-around; */
}

:root {
  --d: 3500ms;
  --angle: 90deg;
  --angle_sec: -90deg;
  --gradX: 100%;
  --gradY: 50%;
  --c1: var(--second-color-border);
  --c2: rgba(207, 255, 123, 0.1);
  --s1: 0.1turn;
  --s2: 0.15turn;
  --s3: 0.25turn;
}

@property --angle {
  syntax: "<angle>";
  initial-value: 90deg;
  inherits: true;
}

@property --angle_sec {
  syntax: "<angle>";
  initial-value: -90deg;
  inherits: true;
}

@property --gradX {
  syntax: "<percentage>";
  initial-value: 50%;
  inherits: true;
}

@property --gradY {
  syntax: "<percentage>";
  initial-value: 0%;
  inherits: true;
}

.select-card {
  width: 330px;
  height: 330px;
  background: transparent;
  backdrop-filter: blur(10px);
  padding: 20px;
  color: var(--white-color);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  justify-content: space-evenly;
  border: 1px solid var(--selection-cards-first-color-border);
  transition: all 0.5s;
  border-image: conic-gradient(
      from var(--angle),
      var(--c2),
      var(--c1) var(--s1),
      var(--c1) var(--s2),
      var(--c2) var(--s3)
    )
    30;
  animation: borderRotate var(--d) linear infinite forwards;
}
@keyframes borderRotate {
  100% {
    --angle: 420deg;
  }
}

.select-card.sec-select-card {
  border: 1px solid var(--selection-cards-second-color-border);
  transition: all 0.5s;
  /* background-color: red; */
  border-image: conic-gradient(
      from var(--angle_sec),
      var(--c2),
      var(--c1) var(--s1),
      var(--c1) 0.15turn,
      var(--c2) 0.25turn
    )
    30;
  animation: secborderRotate var(--d) linear infinite forwards;
}
@keyframes secborderRotate {
  100% {
    --angle_sec: -420deg;
  }
}

.select-card:hover {
  box-shadow: 0px 10px 100px var(--selection-cards-second-color-shadow);
  scale: calc(110%);
}

.select-card .icon {
  width: 100px;
  height: 100px;
  border-radius: 100%;
  box-shadow: inset 0 0 10px 5px rgba(0, 0, 0, 0.05);
  display: flex;
  justify-content: center;
  align-items: center;
}

.select-card .icon img {
  width: 70px;
}