@media screen and (max-width: 655px) {
    /* Layout */
    body {
        padding: 2.5rem 1.25rem;
    }
    header,
    main {
        width: 100%;
        background-color: #fff;
        margin: 0;
        border-radius: 0.5rem;
    }
    footer {
        width: 100%;
        background-color: #D4D4D4;
        color: #303030;
        margin: 0;
        border-radius: 0.5rem;
    }
    section {
        width: 100%;
        display: grid;
        grid-template-columns: 1fr;
        padding: 1.25rem;
    }
    article { 
        width: 100%; 
        display: grid;
        grid-template-columns: 1fr;
        align-items: start;
    }    
    .item {
        width: 100%;
        display: grid;
        position: relative;
        grid-column: 1 / 3;
    }

    /* Modal */
    .modal__container {
        width: 80%;
        padding: 1.5rem;
    }

    /* State */
    .text-field:hover,
    .text-area:hover,
    .drop-down:hover,
    .radio--left:hover,
    .radio--left:hover,
    .radio--right:hover,
    .radio--right:hover,
    .checkbox--left:hover,
    .checkbox--left:hover,
    .checkbox--right:hover,
    .checkbox--right:hover { 
        border: 1px solid #D4D4D4; 
    }
    
    .drop-option:hover {
        background-color: none;
    }
    
    .button--big:hover, 
    .button--small:hover {
        background-color: none;
    }

    .text-field:focus,
    .text-area:focus { 
        border: 1.5px solid #848484; 
    }
    
    .text-field:disabled,
    .text-area:disabled { 
        background-color: #D4D4D4; border: 1px solid #D4D4D4; 
    }

    .error,
    .error:hover,
    .error:focus {
        border: 1.5px solid #ff0000;
    }
}