@import url('https://fonts.googleapis.com/css2?family=Fira+Sans:wght@400;700&family=Proza+Libre:wght@700&display=swap');

.registration-form-4 {
    position: relative;
    background-color: rgb(237, 237, 230);
    font-family: "Fira Sans", sans-serif;
    font-weight: 400;

    &::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        z-index: -1;
        width: 100%;
        height: 22vw;
        background-color: #192b00;
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        background-image: url("https://cdn.sanity.io/images/ih1cp3ax/production/aa92aa5c69afe1a2b4ca731147b46988f0db3163-2887x1920.png?w=1200&q=75");
    }

    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
        font-family: "Proza Libre", sans-serif;
        font-weight: 700;
    }

    .lead {
        font-weight: 400;
    }

}

.registration-form-4:not(.application-success) .main-body {
    padding-top: 150px;

    .row:has(> .col-sm-12 > .logo) {
        grid-column: 1 / -1;
    }

    #registration-composition-form {
        margin-top: 25px;
    }

    .suggested-amounts {
        border-radius: 1.2rem;
    }

    .suggested-amounts > .btn:first-child {
        border-top-left-radius: 1.2rem;
        border-bottom-left-radius: 1.2rem;
    }

    .suggested-amounts > .btn:last-child {
        border-top-right-radius: 1.2rem;
        border-bottom-right-radius: 1.2rem;
    }

    @media(min-width: 500px) {
        padding-top: 22vw;
    }

    @media(min-width: 992px) {
        .langbox {
            right: 0;
        }
    }

    @media(min-width: 1500px) {
        #registration-composition-form {
            display: grid;
            grid-template-columns: 1fr 1fr;

            p,
            .form-row-container,
            div:last-child {
                grid-column: span 2
            }
        }
    }
}