/*
 * LoopGraphic component styles
 *
 * Used on (as of 2026-05-21, CType mask_loop_graphic):
 *   - /absatzfinanzierung/das-koennen-sie-auch
 *   - /absatzfinanzierung/das-koennen-sie-auch-2
 *
 * Source: extracted from frontend/scss/includes/elements/_loop-graphic.scss
 */

.loop-graphic {
    background-repeat: no-repeat;
    background-size: cover;
    padding: 0.625rem;
    position: relative;
    box-shadow: 0 0 34px #00000012;

    @media (min-width: 768px) {
        padding: 2.5rem 5rem;
        padding-bottom: 7.5rem;
    }

    @media (min-width: 992px) {
        padding: 3.75rem 6.25rem;
        padding-bottom: 10rem;
    }

    & .loop-graphic-image {
        margin: 0 auto;
        padding-bottom: 2.5rem;
        margin-bottom: 1.25rem;
        border-bottom: 1px solid var(--abc-light-gray);

        @media (min-width: 768px) {
            border-bottom: 0;
            margin-bottom: 0;
            padding-bottom: 0;
            max-width: 80%;
        }

        @media (min-width: 992px) {
            max-width: 70%;
        }

        @media (min-width: 1330px) {
            max-width: 60%;
        }

        & img {
            display: block;
            max-width: 100%;
        }
    }

    & .loop-icon-top-left,
    & .loop-icon-top-right,
    & .loop-icon-bottom {
        margin-bottom: 1.25rem;

        & figure {
            & > * {
                display: block;
                margin: 0 auto;
            }
        }

        @media (min-width: 768px) {
            display: none;
        }
    }

    & .loop-text-top-left,
    & .loop-text-top-right,
    & .loop-text-bottom {
        width: 90%;
        margin: 0 auto;
        text-align: center;
        margin-bottom: 2.5rem;

        @media (min-width: 540px) {
            width: 60%;
        }

        @media (min-width: 768px) {
            width: 30%;
            margin-bottom: 0;
            position: absolute;
        }

        @media (min-width: 992px) {
            width: 25%;
        }

        @media (min-width: 1330px) {
            width: 20%;
        }

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

    & .loop-text-top-left {
        @media (min-width: 768px) {
            top: 5rem;
            left: 5%;
        }
        @media (min-width: 992px) {
            top: 7.5rem;
            left: 5%;
        }
        @media (min-width: 1330px) {
            top: 10.625rem;
            left: 12%;
        }
    }

    & .loop-text-top-right {
        @media (min-width: 768px) {
            top: 5rem;
            right: 5%;
        }
        @media (min-width: 992px) {
            top: 7.5rem;
            right: 5%;
        }
        @media (min-width: 1330px) {
            top: 10.625rem;
            right: 12%;
        }
    }

    & .loop-text-bottom {
        @media (min-width: 768px) {
            left: 35%;
            bottom: 2.5rem;
        }
        @media (min-width: 992px) {
            left: 37%;
            bottom: 3.75rem;
        }
        @media (min-width: 1330px) {
            left: 40%;
            bottom: 3.75rem;
        }
    }
}