Estilo do saber mais

As tags não estão no visual correto. O arquivo index.tsx está:

import classNames from 'classnames';
import styles from './prato.module.scss';
import { useLocation } from 'react-router-dom';
import cardapio from 'data/cardapio.json';

export default function Prato() {
  const { state } = useLocation();
  const { prato } = state as {prato: typeof cardapio[0]};
  return (
    <>
      <button className={styles.voltar}>
        {'< Voltar'}
      </button>
      <section className={styles.container}>
        <h1 className={styles.titulo}>
          {prato.title}
        </h1>
        <div className={styles.imagem}>
          <img src={prato.photo} alt={prato.title} />
        </div>
        <div className={styles.conteudo}>
          <p className={styles.conteudo__descricao}>
            {prato.description}
          </p>
          <div className={styles.tags}>
            <div className={classNames({ [styles.tags__tipo]: true, [styles[`tags__tipo__${prato.category.label.toLowerCase()}`]]: true})}>
              {prato.category.label}
            </div>
            <div className={styles.tags__porcao}>
              {prato.size}g
            </div>
            <div className={styles.tags__qtdpessoas}>
              Serve {prato.serving} pessoa {prato.serving == 1 ? '' : 's'}
            </div>
            <div className={styles.tags__valor}>
              R$ {prato.price.toFixed(2)}
            </div>
          </div>
        </div>
      </section>
    </>
  );
}

O prato.module.scss:

@import 'styles/variaveis';
@import 'styles/breakpoints';
.voltar {
  background-color: transparent;
  border: none;
  color: $red;
  cursor: pointer;
  font-size: 1.5rem;
  font-weight: bold;
}
.container {
  align-items: center;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.titulo {
  font-size: 3rem;
}
.imagem {
  width: 600px;
  img {
    border-radius: 8px;
    width: 100%;
  }
}
.conteudo {
  align-items: center;
  display: flex;
  flex-direction: column;
  &__descricao {
    color: $darkest-grey;
    font-size: 1.5rem;
    font-weight: bold;
  }
  &____detalhes {
    display: flex;
    justify-content: space-between;
  }
}
$massas: #d73b3b;
$carnes: #30201e;
$combos: #e6c864;
$veganos: #80aa40;
.tags {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin-bottom: 20px;
  max-width: 700px;
  @media (max-width: $desktop_xsm) {
    justify-content: flex-end;

@media (max-width: $mobile) {
    justify-content: flex-start;
}
div {
    margin: 10px;
}
  &__tipo {
  align-items: center;
  border-radius: 2px;
  display: flex;
  font-weight: bold;
  height: 40px;
  justify-content: center;
  padding: 10px 30px;
  &__massas {
    background-color: $massas;
    color: white;
  }
  &__carnes {
    background-color: $carnes;
    color: white;
  }
  &__combos {
    background-color: $combos;
  }
  &__veganos {
    background-color: $veganos;
  }
  }
  &__porcao,
  &__qtdpessoas,
  &__valor {
    align-items: center;
    display: flex;
    font-size: 1.25rem;
    font-weight: bold;
    justify-content: center;
  }
    &__valor {
    color: $red;
    font-size: 1.7rem;
    }
  }
}

Como posso resolver isso?