@use "../common/utils" as *;
@use "../common/mixins" as *;

.content-image {
    background: rgba(var(--color-background));
    padding-block: calc-rem(40px);

    @include media-breakpoint-up(md) {
        padding-block: calc-rem(50px);
    }

    @include media-breakpoint-up(lg) {
        padding-block: calc-rem(80px);
    }

    &__image {
        width: 100%;
        height: auto;
        aspect-ratio: aspect-ratio(845, 500);
        border-radius: var(--border-radius);
        overflow: hidden;

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

    &__content {
        margin-bottom: calc-rem(30px);
        font-size: calc-rem(14px);

        a:not(.btn) {
            font-size: calc-rem(14px);
            color: rgba(var(--color-primary));
            text-decoration: underline;
            font-weight: var(--font-weight-bold);
        }

        p {
            &:last-child {
                margin-bottom: 0;
            }
        }
    }
}
