@import "../bootstrap/variables";

.installment-card {

    &__payments {
        width: 308px;
        height: 443px;
        bottom: -36px;
        margin-top: -36px;

        &:after, &:before {
            content: "";
            position: absolute;
            top: 40px;
            width: 16px;
            height: 16px;
            border-radius: 50%;
            background-color: var(--white);
            z-index: 4;
        }

        &:after {
            left: -8px;
        }

        &:before {
            right: -8px;
        }

        .divider {
            border-top: 1px dashed var(--white);
            opacity: 0.2;
        }

        @media (max-width: $screen-sm-max) {
            width: 100%;
            height: auto;
        }
    }

    &__payments-mask {
        position: absolute;
        inset: 8px;
        bottom: -8px;
        border-radius: 16px;
        opacity: 0.3;
        background: var(--primary);
        z-index: 1;
    }

    &__percent-box {
        border: 1px solid rgba(255, 255, 255, 0.50);
        background: rgba(255, 255, 255, 0.20);
    }

    &__image {
        width: 100%;
        height: 120px;
    }

    .card-progress {
        height: 4px;
    }
}