@media (max-width: 767.98px) {

    .container {
        max-width: 92.5vw;
    }

    .mt-75 {
        margin-top: 32.5px;
    }

    .toolbox .toolbox-tools {
        display: grid;
        grid-template-columns: 1fr;
        gap: 20px;
    } 

    #tool {
        max-width: calc(92.5vw - 40px);
        padding: 30px 20px;
    }

    #tool #tool-form {
        gap: 20px;
    }

    #tool #tool-form .field-group input {
        border-radius: 12.5px;
    }

}

@media (max-width: 575.98px) {

    #hero {
        gap: 10px;
    }

    #hero h1 {
        font-size: 2.125rem;
    }

    #hero h2 {
        font-size: 1.375rem;
    }

    #hero blockquote {
        font-size: 1.5rem;
    }

    #tool #tool-form button {
        font-size: 0.9rem;
    }

    #tool .optional-fields .field-group {
        margin-left: 20px;
    }

}