Utilice CSS Clamp para crear una utilidad contenedora más flexible

Me gusta la idea de Andy aquí:

.wrapper {  width: clamp(16rem, 90vw, 70rem);  margin-left: auto;  margin-right: auto;  padding-left: 1.5rem;  padding-right: 1.5rem;}

Normalmente simplemente pondría un max-widthahí, pero como dice Andy:

Esto se convierte en un pequeño problema en ventanas gráficas de tamaño mediano, como tabletas en modo vertical, en contenido de formato largo, como este artículo, porque contextualmente, las longitudes de las líneas se sienten muy largas .

Entonces, en pantallas súper grandes, tendrás un límite de 70 rem (o lo que creas que es un buen máximo), y en pantallas pequeñas obtendrás el ancho completo, lo cual está bien. Pero son esos puntos intermedios los que no son tan buenos. Hice una pequeña demostración para tener una idea. Este vídeo deja claro lo que pienso: