Aspect Ratio

Controls the aspect ratio of an element.

Class	Property
ar-auto	aspect-ratio: auto;
ar-l	aspect-ratio: 16/9;
ar-s	aspect-ratio: 1/1;

---

Using responsive modifiers

Using responsive breakpoints like sm:ar-*, md:ar-*, lg:ar-*, and xxl:ar-* allows targeting specific utilities in different viewports.

<div class="ar-s md:ar-l ..."></div>

Using hover modifiers

Using :hover modifiers such as h:ar-* allows you to override elements and change their values when hovering over them.

<div class="ar-s h:ar-l ..."></div>