.main-form {
    display: grid;
    grid-template-columns: repeat(2, 1fr);

    align-items: flex-end;
    gap: 25px;
    width: 60%;
    background-color: var(--background-light);
    padding: 40px;
    border-radius: 20px;
}

.main-form .inputs-wrapper {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    align-items: end;

    gap: 20px;
}

.main-form .label-wrapper {
    display: flex;
    flex-direction: column;
    gap: 8px;

    color: #363636;
    font-size: 17px;
}

.main-form .line-wrapper {
    display: flex;
    align-items: center;
    gap: 20px;

    color: var(--color-light);
}

.main-form .extended-field {
    grid-column: 1 / -1;
}

.main-form label {
    user-select: none;
}

.main-form input, .main-form select, .main-form textarea, .main-form button, .main-form .line-wrapper {
    width: 100%;
    border: none;
    padding: 15px 20px;
    border-radius: 20px;
    font-size: 17px;

    background: #fff;
}

.main-form input, .main-form textarea, .main-form select  { 
    outline-color: var(--color-blue);
}

.main-form input::placeholder, .main-form textarea::placeholder {
    color: var(--color-light);
}

.main-form input[type=checkbox] {
    width: 22px;
    height: 22px;

    accent-color: var(--color-blue);
    cursor: pointer;
}

.main-form textarea {
    font-family: 'Rubik', sans-serif;
    resize: none;

    height: 90px;
}

.main-form button {
    background-color: var(--color-blue);
    color: #fff;

    cursor: pointer;
    transition: 150ms;

    grid-column: 1 / -1;
}

.main-form button:hover {
    filter: brightness(0.95);
}

.main-form button[disabled] {
    pointer-events: none;
    user-select: none;
}

@media (max-width: 920px) {

    .main-form {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 750px) {
    header {
        display: none;
    }

    h1 {
        margin-top: 40px;
    }

    .main-form {
        width: 80%;
    }
}