.video {
  --play-font-size: 12;
  --play-padding: 10px 20px;
  --play-icon-size: 10px;
  --gap: 10px;
  position: relative;
}

.video__play {
  -ms-flex-align: center;
      align-items: center;
  border: 2px solid rgb(var(--color-light));
  border-radius: 50px;
  color: rgb(var(--color-light));
  display: -ms-flexbox;
  display: flex;
  font-size: calc(var(--play-font-size) / var(--base) * 1rem);
  gap: var(--gap);
  line-height: 1;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: var(--play-padding);
}
.video__play svg {
  height: var(--play-icon-size);
  width: var(--play-icon-size);
}

@media (min-width: 992px) {
  .video {
    --play-font-size: 20;
    --play-padding: 20px 30px;
    --play-icon-size: 20px;
    --gap: 20px;
  }
}