@layer components {
.rates {
  display: flex;
  flex-direction: row;
  gap: 2rem;
  padding: 2rem 0;
  align-items: center;
  i {
    font-size: 3rem !important;    
    color: var(--neutral-100);
    line-height: 2rem;
  }

  form {
    margin: 0 !important;
  }

  &__star {

    border: 1px solid var(--neutral-100);
    color: black;
    border-radius: 0.8rem;
    font-size: 2rem !important;
    font-weight: 700 !important;
    line-height: 2rem;
    padding: 2rem !important;
    &--1 {
      background-color: var(--primary-100) !important;
    }
    &--2 {
      background-color: var(--primary-200) !important;
    }
    &--3 {
      background-color: var(--primary-300) !important;
    }
    &--4 {
      background-color: var(--primary-400) !important;
    }
    &--5 {
      background-color: var(--primary-500) !important;
    }
  }
}
}