@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@600&family=Roboto:wght@100..900&display=swap');

.registration-form-4 {
    position: relative;
    font-family: "Roboto", sans-serif;
    font-weight: 400;
    font-size: 1.125rem;

    &::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        z-index: -1;
        width: 100%;
        height: 22vw;
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        background-image: url("https://korento.fi/wp-content/uploads/2024/04/Untitled-1-1.png");
    }
}

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

    >.container {
        border-radius: 10px 10px 0 0;
        background-color: #ffffff;
    }

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

    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
        font-family: "Poppins", sans-serif;
        font-weight: 600;
    }

    label {
        font-size: 1rem;
        font-weight: 700;
    }

    h1 {
        font-size: 2rem;
    }

    h2 {
        font-size: 1.75rem;
    }

    .hint-block,
    .invalid-feedback {
        font-size: 0.875rem;
    }

    #registration-composition-form {
        padding: 1.6rem;
    }

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

    .langbox {
        padding-top: 12px;
    }

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

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

            p,
            .logo,
            div:last-child {
                grid-column: span 2
            }
        }
    }
}