﻿.oficinas-row {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

.oficina-item {
    position: relative;
    flex: 1;
    overflow: hidden;
    min-width: 325px;
    height: 400px;
}

    .oficina-item .oficina-bg {
        position: absolute;
        z-index: 0;
        inset: 0;
    }

        .oficina-item .oficina-bg img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

    .oficina-item .overlay {
        position: absolute;
        z-index: 1;
        inset: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(60, 60, 60);
        opacity: 1;
        transition: opacity 250ms ease-in;
    }

        .oficina-item:hover .overlay {
            opacity: 0.6;
        }

    .oficina-item .oficina-content {
        z-index: 2;
        position: absolute;
        inset: 0;
        padding: 2rem;
        display: flex;
        flex-direction: column;
        gap: 1rem;
        width: 100%;
        height: 100%;
        color: white;
    }

    .oficina-item .cta {
        margin-top: auto;
        max-height: 0;
        overflow: hidden;
        transition: max-height 250ms ease-in;
    }

    .oficina-item:hover .cta {
        max-height: 100px;
    }

    .oficina-item .cta .btn {
        background-color: gray;
        color: white;
        display: inline-block;
        font-size: 0.8rem;
    }

.oficina-content .icon {
    width: 45px;
    margin-bottom: 1.5rem;
}

.oficina-content h3 {
    margin: 0;
}

.oficina-content p {
    margin: 0;
    font-size: 0.8em;
}

.contact-form {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    width: min(90%, 800px);
    margin: auto;
}

    .contact-form .fullspan {
        grid-column: 1/-1;
    }

    .contact-form .input-group input, .contact-form .input-group textarea {
        padding: 1em;
        border: 1px solid rgba(100, 100, 100);
        border-radius: 8px;
        font-size: 0.75rem;
        width: 100%;
    }

    .contact-form label {
        font-size: 0.6rem;
        color: rgba(100, 100, 100);
        font-weight: 300;
        margin-bottom: 5px;
        display: inline-block;
    }

    .contact-form .send-btn {
        border-radius: 100px;
        background-color: hsl(var(--light-blue));
        color: white;
        font-size: 0.75em;
        padding: 0.75em 1.5em;
    }

@media only screen and (max-width: 700px) {
    .contact-form .input-group {
        grid-column: 1 / -1;
    }
}
