Cartão de fixação

Nesta demonstração, você está definindo a largura usando clamp(), desta forma: width: clamp(<min>, <actual>, <max>).

Isso define um tamanho mínimo e máximo absolutos e um tamanho real. Com valores, eles podem ficar assim:

.parent {
  width: clamp(23ch, 60%, 46ch);
}

O tamanho mínimo aqui é de 23ch ou 23 unidades de caracteres, e o tamanho máximo é de 46ch (46 caracteres). As unidades de largura de caractere são baseadas no tamanho da fonte do elemento, especificamente na largura do glifo 0. O tamanho "real" é de 50%, que representa 50% da largura do elemento pai.

O que a função clamp() faz aqui é permitir que esse elemento retenha uma largura de 50% até que 50% seja maior que 46ch (em janelas de visualização mais largas) ou menor que 23ch (em janelas de visualização menores). No vídeo, veja como a largura desse card aumenta até o ponto máximo fixado e diminui até o mínimo fixado à medida que o pai é esticado e reduzido. Ela vai ficar centralizada no pai usando outras propriedades para centralizá-lo. Isso permite layouts mais legíveis, porque o texto não vai ser muito largo (acima de 46ch) nem muito apertado e estreito (menos de 23ch).

É possível usar essa técnica para implementar a tipografia responsiva. Por exemplo, font-size: clamp(1.5rem, 20vw, 3rem). Nesse caso, o tamanho da fonte de um título sempre fica limitado entre 1.5rem e 3rem, mas aumenta e diminui com base no valor real de 20vw para se ajustar à largura da janela de visualização.

Essa é uma ótima técnica para garantir a legibilidade com um valor de tamanho mínimo e máximo, mas lembre-se de que ela não é compatível com todos os navegadores modernos, portanto, verifique se você tem substitutos e faça seus testes.

<div class="parent">
  <div class="card">
    <h1>Title Here</h1>
    <div class="visual"></div>
    <p>Descriptive Text. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Sed est error repellat veritatis.</p>
  </div>
</div>

        .parent {
  display: grid;
  place-items: center;
}

.card {
  width: clamp(23ch, 60%, 46ch);
  display: flex;
  flex-direction: column;
  padding: 1rem;
}

.visual {
    height: 125px;
    width: 100%;
  }