@use "base/variables" as v;
@use "base/mixins" as m;

.boton-contacto {
    
    .contenedor {
        
        .boton {
            @include m.boton(v.$rosa, v.$blanco);
            border-radius: .5rem;
            display: block;
            margin: 0 auto;
            margin-top: 1rem;
        }
    }
}

.contact {

    .heading {
        margin-top: 5rem;
    }

    .row {
        display: flex;
        flex-wrap: wrap-reverse;
        gap: 1.5rem;
        align-items: center;

        .image {
            margin: 1rem;
            flex: 1 1 40rem; // Take up 50% of the space

            img {
                width: 100%;
                border-radius: 1rem;
            }
        }

        form {
            margin: 1rem;
            flex: 1 1 50%;
            padding: 2rem 2.5rem;
            box-shadow: 0 .5rem 1.5rem rgba(0, 0, 0, .1);
            border: .1rem solid rgba(0, 0, 0, .1);
            background: v.$blanco;
            border-radius: .5rem;

            textarea {
                height: 15rem;
                width: 100%;
                resize: none;
            }

            .boton {
                @include m.boton(v.$rosa, v.$blanco);
                border-radius: .5rem;
                display: block;
                margin: 0 auto;
                margin-top: 1rem;
            }

            .inputBox {

                input,
                textarea {
                    width: 100%;
                    font-size: 1.7rem;
                    color: v.$grisOscuro;
                    padding: 1rem;
                    text-transform: none;
                    border: .1rem solid rgba(0, 0, 0, .1);
                    border-radius: .5rem;
                    margin: .7rem 0;

                    &:focus {
                        border-color: v.$rosa;
                    }
                }

            }

        }

    }
}