Сделайте изображение скрытым с маленьких экранов в Vuetify

Как видно на рисунке, есть два раздела, первый раздел - это изображение и логотип, а второй раздел - это форма, но я хочу, чтобы изображение появлялось на экранах Medium, Large и XL и исчезало на экране. отдых. Проблема в том, что я пытался сделать это и использовал инструкции в документе, но когда я скрыл изображение с маленьких экранов и попробовал его через браузер, оно выглядело так: Как я могу решить эту проблему? addProject.vue:

<template>
  <v-app style = "height:100%; width:100%; display:flex;">
    <v-layout>
      <v-flex  class = "hidden-sm-and-xs">
        <v-card
          style = "height:100%; width:100%; display:flex;"
        >
          <v-layout>
            <v-flex md12 class = "pl-9">
              <v-img
                src = "../../../../src/assets/logoWhitePages.png"
                style = "transform: scale(1.2);"
              />
            </v-flex>
          </v-layout>

          <v-list-item style = "box-shadow:0px 0px 0px  white;">
            <v-list-item-content class = "pr-5">
              <v-img
                src = "../../../../src/assets/create.svg"
                style = "transform: scale(0.9);"
              ></v-img>
            </v-list-item-content>
          </v-list-item>
        </v-card>
      </v-flex>

      <v-flex xs4 md5 lg4.5 style = "height: 100%">
        <v-card
          style = "height:100%; width:100%; box-shadow:0px 0px 20px 11px #F4F3F4"
        >
          <v-layout row>
            <v-flex xs12 class = "text-right mt-12 pr-13">
              <v-btn icon class = "myfont ml-3" router to = "/">
                <v-icon medium aria-hidden = "false">
                  east
                </v-icon>
              </v-btn>
            </v-flex>
          </v-layout>
          <v-list-item>
            <v-list-item-content>
              <v-card-text>
                <v-container>
                  <form class = "mr-6 ml-7 pr-6 pl-15 ml-3 pr-15 mr-15">
                    <v-card-text
                      bold
                      class = "mx-auto pt-16 mt-16 "
                      style = "color: #D53C3C ; font-size:1.8rem;"
                    >
                      <h2
                        class = "pt-15 pb-13 font-face
                      text-h2  
                             
                      text-md-h1        
                      text-lg-h2         
                      text-xl-h3          
                      text-truncate
                       "
                      >
                        Create project
                      </h2>
                      <v-text-field
                        label = "Project Name"
                        v-model = "project_Name"
                        type = "text"
                        color = "#D53C3C "
                        class = " pb-13"
                      >
                        {{ project_Name }}
                      </v-text-field>
                      <v-layout>
                        <v-flex>
                          <v-btn
                            @click = "onAddProject"
                            depressed
                            elevation = "2"
                            x-large
                            class = "buttonSettings"
                            color = "#D53C3C"
                            block
                          >
                            Create
                          </v-btn>
                        </v-flex>
                      </v-layout>
                    </v-card-text>
                  </form></v-container
                >
              </v-card-text>
            </v-list-item-content>
          </v-list-item>
        </v-card>
      </v-flex>
    </v-layout>
  </v-app>
</template>

<script>
import { mapActions } from "vuex";
import ActionsTypes from "../store/types/actions-types";

export default {
  data() {
    return {
      project_Name: "",
    };
  },
  methods: {
    ...mapActions({
      AddprojectAction: ActionsTypes.POST_PROJECT_DATA_ACTION,
    }),
    onAddProject() {
      this.AddprojectAction({
        project_Name: this.project_Name,
      });
      console.info(this.AddprojectAction, this.project_Name);
    },
  },
};
</script>

<style scoped>
.buttonSettings {
  color: #f4f3f4;
  border-radius: 0.2.5rem;
  font-size: 1.3rem;
  text-transform: lowercase;
}

.font-face {
  font-family: "Aviliator";
  src: url("../../../../src/assets/Aviliator.otf");
}
</style>