/** * This mixins helps you positioning objects (i.e. images, videos) to a 'focal point'. * A focal point is a manual choosen point in an object that will be in the center of the cropped object. * If the object is not cropped, the focal point does not apply. Best used with RV-AspectRatio. * The focal point is given in percentages relative to the objects size. * To set the focal point either use one the the predefined classes or set them using inline CSS: * class="RV-FocalPoint" style="--focalX: 44%; --focalY: 16.66%" * */ RV-FocalPoint--upperHalf() +RV-Block--modifier() RV-CSSParameter({ focalY: 25% }) RV-FocalPoint--lowerHalf() +RV-Block--modifier() RV-CSSParameter({ focalY: 75% }) RV-FocalPoint--leftHalf() +RV-Block--modifier() RV-CSSParameter({ focalX: 25% }) RV-FocalPoint--rightHalf() +RV-Block--modifier() RV-CSSParameter({ focalX: 75% }) RV-FocalPoint(focalX=50%, focalY=50%) +RV-Block() RV-CSSParameter({ focalX: focalX, focalY: focalY }) height 100% width 100% display block object-fit cover object-position --focalX --focalY RV-FocalPoint--upperHalf() RV-FocalPoint--lowerHalf() RV-FocalPoint--leftHalf() RV-FocalPoint--rightHalf() RV-FocalPoint()