@media all and (min-width: 320px) {
    .modal-layout-component {
        bottom: -100%;
        top: initial;
        width: 100%;
        box-sizing: border-box;
        border-radius: 16px 16px 0 0;
        height: auto;
        max-height: calc(100% - 40px);
        visibility: hidden;
        opacity: 0;
        pointer-events: none;
        position: fixed;
        float: left;
        transition: all 0.3s;
    }

    .modal-layout-component.open {
        visibility: visible;
        opacity: 1;
        pointer-events: auto;
        background: #FFF;
        box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.25);
        padding: 24px 0;
        z-index: 16401;
        font-size: 14px;
        bottom: 0;
    }

    .modal-backdrop {
        visibility: hidden;
        opacity: 0;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 16400;
    }

    .modal-backdrop.open {
        visibility: visible;
        opacity: 1;
        background-color: rgba(0,0,0,0.7);
    }

    .modal-layout-component .close-container {
        position: absolute;
        width: 44px;
        height: 44px;
        padding: 7px 9px;
        border-radius: 50%;
        right: 14px;
        top: 17px;
        box-sizing: border-box;
    }

    .modal-layout-component .inner-content {
        overflow-y: scroll;
        height: 60vh;
        border-top: solid;
        border-width: 1px;
        border-color: #eee;
        padding: 16px 24px 0;
        box-sizing: border-box;
    }

    .modal-layout-component .footer-content {
        border-radius: 6px;
        background: #F5F5F5;
        padding: 20px;
        text-align: center;
        color: #666;
        font-size: 14px;
        font-style: normal;
        font-weight: 400;
        line-height: 19px;
        margin: 24px 24px 0 24px;
        border-top: solid;
        border-width: 1px;
        border-color: #eee;
    }

    .modal-layout-component h3 {
        font-size: 20px;
        margin: 0 24px 24px;
        color: #111;
        font-style: normal;
        font-weight: 700;
        line-height: normal;
    }

    .card .card-content .modal-layout-component h3 {
        text-transform: capitalize;
    }

    .modal-layout-component p {
        color: #666;
        font-family: Karla;
        font-size: 14px;
        font-style: normal;
        font-weight: 400;
        line-height: 19px;
    }

    body .use-inter-font,
    body .use-inter-font button,
    body .use-inter-font p {
        font-family: var(--font-family);
    }
}

@media only screen and (max-width: 359px) {
    .modal-layout-component .inner-content {
        max-height: 50vh;
    }
}

@media only screen and (max-width: 767px) {
    .modal-layout-component.open {
        bottom: 0;
    }
}

@media all and (min-width: 768px) {
    .modal-layout-component {
        border-radius: 16px 16px 16px 16px;
        height: 614px;
        position: fixed;
        float: left;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        width: 532px;
        transition: all 0s;
    }

    .modal-layout-component.open {
        padding: 32px 0;
    }

    .modal-layout-component .footer-content {
        margin: 32px 32px 0 32px;
    }

    .modal-layout-component .inner-content {
        height: 410px;
        padding: 16px 32px 0;
    }

    .modal-layout-component h3 {
        font-size: 18px;
        margin: 0 32px 32px;
    }
}