@use '../../../../../style/variables.scss';

.helpLists {
  display: grid;
  width: 100%;
  grid-template-columns: 50% 50%;
  max-width: 782px;
  .helpList {
    display: flex;
    flex-direction: column;
    row-gap: 12px;
    width: 100%;
    list-style: none;
    margin: 0;
    padding: 0;
    &:first-child {
      padding-right: 60px;
      width: calc(100% - 60px);
    }
    .helpKeyUnit {
      display: flex;
      width: max-content;
      max-width: 100%;
      align-items: center;
      column-gap: 12px;
      .helpKey {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 32px;
        border: 1px solid variables.$white;
        border-radius: 16px;
        span {
          padding: 9px 11px;
          font-size: 14px;
          line-height: 14px;
          font-weight: 700;
          white-space: nowrap;
        }
      }
      .helpKeyDef {
        color: variables.$white;
        font-size: 1rem;
        line-height: 1.2rem;
        font-weight: 400;
      }
    }
  }
}
