.mp_card_provider {
    --mpcard-height:        660px;
    --mpcard-font-size-l:   66px;
    --mpcard-font-size-m:   52px;
    --mpcard-font-size-s:   30px;
    --mpcard-font-weight-l: 600;
    --mpcard-font-weight-m: 600;
    --mpcard-font-weight-s: 600;
    --mpcard-line-height-l: calc(var(--mpcard-font-size-l) * 1.13);
    --mpcard-line-height-m: calc(var(--mpcard-font-size-m) * 1.13);
    --mpcard-line-height-s: calc(var(--mpcard-font-size-s) * 1.13);
    --mpcard-icon-size:     56px;
    --mpcard-padding:       36px;
    --mpcard-max-width:     1200px;
    --mpcard-gap:           8px;
    --x-icon-size: 256px;

    --mp_color_violet: linear-gradient(130deg, #ff875f 0%, #bf88ef  100%);
    --mp_color_green: linear-gradient(45deg, #8cae63 0%, #7fcdf4 100%);
    --mp_color_bright: linear-gradient(140deg, #e7ff9f 0%, #ffbb5d 100%);

    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--mpcard-gap);
    padding: 18px;
}

.mp_card_box {
    position: relative;
    display: flex;
    flex-direction: column;
    height: fit-content;
    align-items: center;

    > .content {
        width: 100%;
        margin-left: auto;
        margin-right: auto;
        max-width:      var(--mpcard-max-width);
        gap:            var(--mpcard-gap);
        position:       relative;
        display:        flex;
        flex-direction: row;
        height:         fit-content;
    }

}

.mp_card {
    flex: 1;
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-radius: 18px;

    padding: var(--mpcard-padding);
    height: var(--mpcard-height);
    gap: calc(var(--mpcard-padding) * 0.75);

    > * {
        flex-shrink: none;
    }

    .mp_card_header {
        flex: 1;
        display: flex;
        flex-direction: column;
    }
    .mp_card_footer {
        display: flex;
        flex-direction: column;
        justify-content: start;
        justify-content: end;
    }
    .mp_card_icon {
        height: var(--x-icon-size);
        width:  var(--x-icon-size);
    }

    .h1 {
        font-weight: var(--mpcard-font-weight-l);
        font-size: var(--mpcard-font-size-l);
        line-height: var(--mpcard-line-height-l);
    }
    .h2 {
        font-weight: var(--mpcard-font-weight-m);
        font-size: var(--mpcard-font-size-m);
        line-height: var(--mpcard-line-height-m);
    }
    .h3 {
        font-weight: var(--mpcard-font-weight-s);
        font-size: var(--mpcard-font-size-s);
        line-height: var(--mpcard-line-height-s);
    }
    .tleft {
        align-items: start;
        justify-content: left;
    }
    .bcenter {
        align-items: center;
        justify-content: end;
    }
    .center {
        align-items: center;
        justify-content: center;
        > * {
            width: fit-content;
            text-align: center;
        }
    }
    .bleft {
        align-items: start;
        justify-content: left;
    }
}
.nopad {
    padding: unset;
}
.pad {
    padding: var(--mpcard-padding);
}

.mp_card_shadow {
    box-shadow: 2px 0px 34px 4px rgba(54,54,54,0.15);
}

.mp_card_light {
    background-color: rgb(255, 255, 255);
    color: black;
}
.mp_card_tinted {
    color: rgb(255, 255, 255);
    background: #202020;
}
.mp_card_green {
    background: var(--mp_color_green);
    color: #fff;
}
.mp_card_violet {
    background: var(--mp_color_violet);
    color: #fff;
}

.mp_text_violet {
    background-image: var(--mp_color_violet);
    color: transparent;
    background-clip: text;
}
.mp_text_green {
    background-image: var(--mp_color_green);
    color: transparent;
    background-clip: text;
}
.mp_text_bright {
    background-image: var(--mp_color_bright);
    color: transparent;
    background-clip: text;
}
.mp_color_green {
    color: var(--mp_color_green);
}

.row {
    flex-direction: row;
}


@media screen and (max-width: 1200px) {

    .mp_card_provider {
        --mpcard-height:        550px;
        --mpcard-font-size-l:   60px;
        --mpcard-font-size-m:   46px;
        --mpcard-font-size-s:   26px;
        --mpcard-icon-size:     50px;
        --x-icon-size: 192px;
    }
}

@media screen and (max-width: 870px) {

    .mp_card_box {

        > .content {
            flex-direction: column;
        }
    }

    .mp_card {
        flex: unset;
    }

    .mp_card_provider {
        --mpcard-height:        500px;
        --mpcard-font-size-l:   54px;
        --mpcard-font-size-m:   40px;
        --mpcard-font-size-s:   22px;
        --mpcard-icon-size:     50px;
        --mpcard-max-width:     420px;
        --x-icon-size: 128px;
    }
}