Object Position

Controls how to position the container’s content.

Class	Property
op-b	`object-position: bottom;`
op-c	`object-position: center;`
op-l	`object-position: left;`
op-lb	`object-position: left bottom;`
op-lt	`object-position: left top;`
op-r	`object-position: right;`
op-rb	`object-position: right bottom;`
op-rt	`object-position: right top;`
op-t	`object-position: top;`

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

<div class="op-l md:op-r ..."></div>

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

<div class="op-l h:op-r ..."></div>