.form-container {
    padding: 1rem;
    background-color: var(--background-color);
    border-radius: var(--border-radius);
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
    
    .success {
        background-color: lightgreen;
        padding: 0.5rem;
        border-radius: var(--border-radius);
        border: 1px solid forestgreen;
    }
}

.contact-form {
    display: flex;
    flex-direction: column;
    gap: 1rem;

    label {
        font-weight: bold;
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
    }

    input, textarea {
        padding: 0.5rem;
        border: 1px solid var(--text-color);
        border-radius: var(--border-radius);
        transition: var(--transition);

        &:focus {
            border-color: var(--primary-color);
            outline: none;
        }
    }

    textarea {
        resize: vertical;
    }

    button {
        align-self: flex-start;
    }
}

.call-to-action {
    background-color: var(--background-color);
    color: var(--text-color);
    padding: 1rem;
    border-radius: var(--border-radius);
    text-align: center;
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
    margin-top: 2rem;
}

.block-grid {
    display: grid;
    gap: 1rem;

    @media screen and (min-width: 600px) {
        grid-template-columns: repeat(2, 1fr);
    }

    @media screen and (min-width: 900px) {
        grid-template-columns: repeat(3, 1fr);
    }

    .block {
        background-color: var(--block-background);
        padding: 1rem;
        border-radius: var(--border-radius);
        box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
        border: 1px solid var(--block-background);

        &:hover {
            border-color: var(--primary-color);
        }
    }
}                                        