@import "../../resources/scss/util/variables";
@import "../../resources/scss/util/mixins";
@import "../../resources/scss/vendor/bootstrap/vendor/rfs";

.block-header-resources {
    position: relative;
    @include padding(rem-calc(2.5rem 0rem 2.5rem));

    &__text-wrapper {
        @include padding-left(rem-calc(4.375rem));

        @media screen and (max-width: 1499px) {
            padding-left: 0;
        }

        h1 {
            max-width: 95%;
            @include bp($lg, true) {
                max-width: 100%;
            }
        }

        .heading {
            max-width: 95%;
            font-weight: 700;
            color: $secondary;
            @include fluid-type(32, 70, 375, $max-container-size);
            line-height: 100%;
            @include margin-bottom(rem-calc(16));

            @include bp($lg, true) {
                max-width: 100%;
            }
        }

        p {
            font-weight: 400;
            @include margin-bottom(rem-calc(3.125rem));
            max-width: 85%;
            @media screen and (max-width: 1499px) {
                max-width: 100%;
            }
        }
    }

    &__image-wrapper {
        position: relative;

        picture {
            img {
                border-radius: 20px;
            }
        }
    }

    &__image-wrapper-label {
        position: absolute;
        top: 1.25rem;
        left: 1.25rem;
        background-color: $white;
        border-radius: 0.625rem;
        @include padding(rem-calc(0.25rem 1.188rem));

        p {
            color: $secondary;
            margin: 0;
        }
    }
}