/*
 * NumberFactBox component styles
 *
 * Used on (as of 2026-05-26, CType mask_number_fact_box):
 *   - /factoring/factoring-lp-1
 *   - /factoring/factoring-mit-abcfinance
 *   - /factoring/fastfactoring
 *   - /factoring/forderungsverkauf
 *   - /factoring/factoring-lp
 *   - /factoring/rechnungen-verkaufen
 *   - /factoring/tide
 *   - /factoring/tidely
 *
 * Source: extracted from frontend/scss/includes/molecules/_number-fact-box.scss
 */

.number-fact-box {
    background-color: var(--abc-light-gray);
    padding: 40px 0;
    margin-bottom: 30px;

    @media (min-width: 540px) {
        padding: 0;
        height: 0;
        padding-bottom: 100%;
        position: relative;
    }

    &.bg-color-white {
        background-color: #fff;
    }

    &:hover {
        transition: all 200ms ease-in;
        box-shadow: 0 0 10px 0 rgba(206, 212, 218, 1);
        z-index: 2;
    }

    .content {
        width: 80%;
        margin: 0 auto;
        text-align: center;

        @media (min-width: 540px) {
            margin: 0;
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
        }

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

    .number {
        color: var(--abc-red);
        font-size: 3rem;
        font-weight: bold;

        @media (min-width: 1330px) {
            font-size: 4.5rem;
        }
    }
}