@media (max-width : 1223px){
    .div_add_options_pattern{
        display: grid;
        grid-template-areas: "div_columns" "div_rows";
        grid-template-columns: repeat(1, 1fr);
        justify-content: space-evenly;
    }

    .div_figure_color{
        display: grid;
        grid-template-areas:
        "div_color_text"
         "div_color_input";
        grid-template-columns: repeat(1, 1fr);
    }

    .div_figure_size{
        display: grid;
        grid-template-areas:
        "div_size_text"
         "div_size_input";
        grid-template-columns: repeat(1, 1fr);
    }
}

@media only screen and (max-device-width : 1223px), @media only screen and (max-device-width : 1223px) and (orientation : portrait){
    .grid_generate{
        display: grid;
        grid-template-areas: "div_generate_input" "div_generate_canvas" "div_generate_icons";
        grid-template-columns: repeat(1, 1fr);
        grid-gap: 15px;
        justify-content: space-evenly;
    }

    .grid_choose_category_figure{
        display: grid;
        grid-template-areas:
        "div_category" "div_figure";
        grid-template-columns: repeat(1, 1fr);
    }

    .padding{
        padding: 5px;
    }

    .div_add_options_pattern{
        display: grid;
        grid-template-areas: "div_columns" "div_rows";
        grid-template-columns: repeat(1, 1fr);
        justify-content: space-evenly;
    }

    .div_add_options_fractal{
        display: grid;
        grid-template-areas: "div_color_option" "div_add_iterations" "div_add_rotation_iteration";
        grid-template-columns: repeat(1, 1fr);
    }

    .div_add_options_figure{
        display: grid;
        grid-template-columns: repeat(1, 1fr);
    }

    .grid_bg_color{
        display: grid;
        grid-template-areas:
        "div_bg_color" "div_bg_image";
        grid-template-columns: repeat(1,1fr);
    }

    .div_figure_options{
        display: grid;
        grid-template-areas:
            "div_figure_color"
            "div_figure_size";
        grid-template-columns: repeat(1, 1fr);
        grid-gap: 0px;
        /*padding: 15px;*/
    }

    .div_figure_more{
        display: grid;
        grid-template-areas:
            "div_figure_more_color" "div_figure_more_shape";
        grid-template-columns: repeat(1, 1fr);
        grid-gap: 0px;
    }

    .div_figure_color{
        display: grid;
        grid-template-areas:
        "div_color_text"
         "div_color_input";
        grid-template-columns: repeat(1, 1fr);
    }

    .div_figure_size{
        display: grid;
        grid-template-areas:
        "div_size_text"
         "div_size_input";
        grid-template-columns: repeat(1, 1fr);
    }

    .div_color_input{
        display: grid;
        grid-template-areas: "div_color_option"
         "div_color_value";
        grid-template-columns: repeat(1, 1fr);
    }

    .div_size_input{
        display: grid;
        grid-template-areas: "div_size_option"
         "div_size_value";
        grid-template-columns: repeat(1, 1fr);
    }

    .div_size_text, .div_color_text{
        text-align: center;
    }
}