@use '../function' as *;
@use '../mixin';

@mixin roolith-img() {
    .img {
        max-width: 100%;
    }

    .img-full-width {
        width: 100%;
    }

    .rounded {
        overflow: hidden;
        @include mixin.border-radius(var(--r-img-radius));
    }

    .rounded-circle {
        overflow: hidden;
        border-radius: 50%;
    }

    .fig-center {
        text-align: center;
    }

    .fig-caption {
        font-size: rem(14);
        line-height: rem(18);
        color: var(--r-img-caption-color);
        padding-top: rem(3);
    }

    .fig-fit {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
}