.help-modal {
  max-width: 60vw !important;
  width: 60vw !important;

  .body {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--spacing-200);

    .item {
      display: flex;
      flex-direction: column;
      min-width: 0;
      padding: 24px 24px 16px;
      border: 1px solid var(--border-subtle-2);
      border-radius: var(--radius-100);

      > .title {
        @include subtitle-small-2;
        color: var(--text-primary);
        margin-bottom: 4px;
      }

      > .desc {
        @include body-medium-1;
        color: var(--text-secondary);
      }

      > .ds-button {
        margin-top: auto;
      }
    }

    .item-tour {
      background-color: #ebeff8;

      .help-checkbox-label {
        display: flex;
        align-items: center;
        gap: var(--spacing-100);
        cursor: pointer;
        margin: 8px 0;

        .help-checkbox {
          cursor: pointer;
        }
      }
    }
  }
}

@media (max-width: 1366px) {
  .help-modal {
    max-width: 80vw !important;
    width: 80vw !important;
  }
}

@media (max-width: 768px) {
  .help-modal {
    max-width: 90vw !important;
    width: 90vw !important;
  }
}

@media (max-width: 767px) {
  .help-modal {
    top: 50% !important;
    max-width: 90vw !important;
    width: 90vw !important;

    .body {
      .live-tour {
        flex-direction: column;
        gap: 8px;

        .tour-content {
          max-width: 100%;

          > .title {
            @include subtitle-small-2;
          }

          > .desc {
            @include body-small-1;
          }
        }

        .app-picture-container > img {
          width: 120px;
          height: 90px;
        }
      }

      .other-actions {
        display: flex;
        flex-direction: column;
        gap: var(--spacing-200);

        .item {
          padding: 8px 16px;
        }
      }
    }
  }
}