.button-line-wrapper {
  display: flex;
  justify-content: center;

  .button-line {
    width: 320px;
    user-select: none;

    a {
      padding-left: 16px;
      border: 1px solid var(--gray-500);
      height: 52px;
      display: flex;
      justify-content: center;
      align-items: center;
      border-radius: 4px;
      cursor: pointer;
      width: 100%;
      gap: 4px;

      span {
        width: fit-content;
      }
      img {
        width: 24px;
        height: 24px;
      }

      &:hover {
        background-color: #f7f7f3;
      }
    }
  }

  &.white {
    a {
      border: 1px solid var(--white);
      span {
        color: var(--white);
      }

      &:hover {
        background-color: rgba(0, 0, 0, 0.3);
      }
    }
  }
}

@media screen and (max-width: 480px) {
  .button-line-wrapper {
    padding: 0 24px;
    width: 100%;
    .button-line {
      a {
        width: 100%;
        height: 48px;
        font-size: 16px;
        &:hover {
          background-color: #f7f7f3;
        }
      }
    }
  }
}