section.search {
  max-width: var(--max-section-grid-width);
  margin: 0 auto;

  .content {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg);
    padding: var(--section-padding-desktop);
    @media screen and (max-width: 48rem) {
      padding: var(--section-padding-mobile);
    }

    .search-breadcrumbs-container {
      .breadcrumb-item {
        color: var(--black);
      }
    }
    .search-form {
      form#gf-search-form {
        display: flex;
        gap: var(--spacing-md);
        border-bottom: 1px solid var(--black);
        width: fit-content;
        padding: var(--spacing-xs);

        &:has(#gf-search-input:focus) {
          border-bottom: 2px solid var(--black);
        }
        &:has(#gf-search-input:hover) {
          box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
        }
        input#gf-search-input {
          min-width: 24rem;
          color: var(--Grey-Grey-5, #212121);
          font-family: var(--font-family-default);
          font-size: var(--font-size-paragraph-desktop-md);
          font-style: normal;
          font-weight: 500;
          line-height: normal;
          &:focus {
            outline: none;
          }
          &::placeholder {
            font-weight: 400;
          }

          @media screen and (max-width: 48rem) {
            min-width: unset;
          }
        }
        svg {
          width: 1.5rem;
          height: 1.5rem;
        }
      }
    }

    .search-results-container {
      margin-block-start: var(--spacing-xxxl);
      display: flex;
      flex-direction: column;
      gap: var(--spacing-lg);

      div.cards-wrapper {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr));
        gap: var(--spacing-lg);
        margin-block-start: var(--spacing-lg);
        @media screen and (max-width: 48rem) {
          grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
        }
      }
    }
  }
}