@use "@styles/abstracts/functions" as fun;
@use "@styles/abstracts/mixins" as mix;

.wrapper {
  --icon-size: #{fun.convert-px(70)};

  display: flex;
  flex-flow: row wrap;
  align-items: center;
  place-content: center;
  gap: var(--spacing-2xs);
  margin: 0;
  font-family: var(--font-family-secondary);
  font-size: var(--font-size-md);
  text-align: center;

  @include mix.media("screen") {
    @include mix.dimensions("sm") {
      place-content: start;
      text-align: left;
    }
  }
}

.name {
  flex: 1 0 100%;

  @include mix.media("screen") {
    @include mix.dimensions("sm") {
      flex: auto;
    }
  }
}