@media (hover: hover) {
  .primary-btn:hover {
    background: var(--primary-bright);
  }
  .secondary-btn:hover {
    color: var(--primary-dark);
  }
  .secondary-btn:hover::after {
    transform-origin: left;
    transform: scaleX(1);
  }
  .svg-btn:hover svg path {
    stroke: var(--primary-bright);
    transform: scale(1.05);
  }
}

@media (max-width: 979px) {
  html {
    font-size: 9px;
  }
  .wrapper {
    padding: 0px 10px;
  }
}

@media (max-width: 709px) {
  .game-info__btn-container {
    flex-direction: row;
  }
  .main {
    display: flex;
    flex-direction: column;
    gap: 20px;
    align-items: center;
  }
  .secondary-btn {
    font-size: 1.6rem;
  }
  .game-info {
    flex-direction: row;
    justify-content: space-between;
    min-height: auto;
    width: 100%;
  }
  .p {
    font-size: 1.5rem;
  }
  .game-description {
    width: 33vw;
  }
  .secondary-actions {
    gap: 20px;
  }
  .game-info__game-options {
    width: 58vw;
    align-items: center;
    text-align: center;
  }
  .game-field {
    width: 100%;
    gap: 20px;
  }
}

@media (max-width: 630px) {
  html {
    font-size: 7px;
  }
}

@media (max-width: 506px) {
  .secondary-actions svg {
    display: none;
  }
  .secondary-actions {
    gap: 10px;
  }
  html {
    font-size: 6.5px;
  }
}