#search-page {
  margin-top: 13.6rem;

  .main {
    .search {
      display: flex;
      justify-content: center;
      width: 100%;

      .search__wrapper {
        max-width: 130rem;
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: center;

        .search__header {
          width: 100%;

          .search__input {
            position: relative;

            input {
              width: 100%;
              height: 4rem;
              border: none;
              outline: none;
              border-radius: 2rem;
              padding-left: var(--spacing-lg);
              padding-right: var(--spacing-3xl);
              background-color: var(--color-gray-500);
              font-size: var(--font-body-large-size);
              font-weight: var(--font-body-large-weight);
              line-height: var(--font-body-large-line-height);
              letter-spacing: var(--font-body-large-letter-spacing);
            }

            input::placeholder {
              color: var(--color-gray-300);
            }

            .search__search {
              cursor: pointer;
              position: absolute;
              top: 50%;
              right: var(--spacing-lg);
              transform: translateY(-1.2rem);

              .search__icon {
                width: 2.4rem;
                height: 2.4rem;
                color: var(--color-gray-300);
              }
            }
          }
        }

        .search__list {
          width: 100%;
          display: grid;
          column-gap: var(--spacing-2xl);
          row-gap: var(--spacing-xl);
        }

        .search__empty {
          display: flex;
          flex-direction: column;
          align-items: center;
          gap: var(--spacing-md);
          padding-block: 7.2rem;

          img {
            width: 12rem;
          }

          .search__empty-text {
            color: var(--color-gray-300);
            font-size: var(--font-body-large-size);
            font-weight: var(--font-body-large-weight);
            line-height: var(--font-body-large-line-height);
            letter-spacing: var(--font-body-large-letter-spacing);
          }
        }

        .search__empty.hidden {
          display: none;
        }

        .search__loading-spinner {
          width: 5.6rem;
          margin: 0 auto;
          padding-block: 7.2rem;

          img {
            width: 100%;
            aspect-ratio: 1/1;
            object-fit: cover;
            animation: spin 1s linear infinite;
          }
        }

        .search__loading-spinner.hidden {
          display: none;
        }

        @keyframes spin {
          from {
            transform: rotate(0deg);
          }

          to {
            transform: rotate(360deg);
          }
        }
      }
    }
  }
}

@media (max-width: 640px) {
  .search {
    .search__wrapper {
      padding-inline: var(--spacing-lg);

      .search__list {
        grid-template-columns: 1fr;
        padding-block: var(--spacing-lg);
      }
    }
  }
}

@media (min-width: 640px) and (max-width: 1024px) {
  .search {
    .search__wrapper {
      padding-inline: var(--spacing-xl);
    }

    .search__list {
      grid-template-columns: repeat(2, 1fr);
      padding-block: var(--spacing-xl);
    }
  }
}

@media (min-width: 1024px) and (max-width: 1280px) {
  .search {
    .search__list {
      grid-template-columns: repeat(3, 1fr);
    }
  }
}

@media (min-width: 1024px) {
  .search {
    .search__wrapper {
      padding-inline: var(--spacing-2xl);
    }

    .search__list {
      padding-block: var(--spacing-2xl);
    }
  }
}

@media (min-width: 1280px) {
  .search {
    .search__list {
      grid-template-columns: repeat(4, 1fr);
    }
  }
}