index.scss

@import '../../../assets/scss/mixins.scss';

.search-box {
  margin: auto;
  padding: 20px 0;
  text-align: center;

  .search-input {
    @include desktop() {
      font-size: var(--h3-md);
    }
    @include tablet() {
      font-size: var(--h3-sm);
    }
    @include mobile() {
      font-size: var(--h3-xs);
    }
    margin: 0.4rem 0;
    padding: 0.8rem;
    width: unquote('min(85vw, 500px)');
    border-radius: 20px;
    outline: none;
    text-align: center;
  }
  .paraphrase {
    color: var(--bg-amber-dark);
    @include desktop() {
      font-size: var(--h3-md);
    }
    @include tablet() {
      font-size: var(--h3-sm);
    }
    @include mobile() {
      font-size: var(--h3-xs);
    }
    .keyword {
      color: var(--h3-color);
    }
  }
}