.my-help-modal {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1033;

  width: 100vw;
  height: 100vh;

  display: flex;
  align-items: center;
  justify-content: center;

  background-color: var(--cor-modal-overlay);
}

.my-help-modal .my-container {
  display: flex;
  flex-direction: column;
  gap: 24px;

  width: 1856px;
  height: 1012px;
  padding: 32px;

  background: var(--corsecundaria);
  border: 4px solid var(--corborda);
  border-radius: 10px;

  overflow-y: auto;
}

.my-help-modal .my-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.my-help-modal .my-buttons-container {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 32px;
}

.my-help-modal .my-btn[data-tab] {
  cursor: pointer;
  transition: background 0.2s;
}

.my-help-modal .my-btn.my-active {
  background: var(--corprimaria);
}

.my-help-modal .my-btn.my-close-btn {
  width: 68px;
  background: var(--cor-feedback-negativo-degrade);
  cursor: pointer;
}

.my-help-modal .my-body {
  display: flex;
  gap: 32px;
  flex-wrap: wrap;
}

.my-help-modal .my-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;

  flex: 0 0 calc((100% - 2 * 32px) / 3);

  padding: 32px;
  height: 376px;

  border: 4px solid var(--corborda);
  border-radius: 10px;
}

.my-help-modal .my-card-title {
  display: flex;
  align-items: center;
  gap: 32px;
}

.my-help-modal .my-card-description {
  text-align: center;
}

.my-help-modal .my-footer {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.my-help-modal .my-body[data-tab="casino"] .my-card:nth-child(n + 4) {
  flex: 0 0 calc((100% - 1 * 32px) / 2);
}

@media (max-width: 1200px) {
  .my-help-modal .my-container {
    width: 1016px;
    height: 1468px;
    font-size: 32px !important;
  }

  .my-help-modal .my-card {
    flex: 0 0 calc((100% - 1 * 32px) / 2);

    height: 392px;
  }

  .my-help-modal .my-body[data-tab="casino"] .my-card:last-child {
    flex: 0 0 100%;
  }

  .my-help-modal .my-btn {
    width: 68px;
  }

  .my-help-modal .my-btn[data-tab] > span:last-child {
    display: none;
  }
}