Untitled

<template>
  <div>
    <MenuComponent view="analytics"></MenuComponent>
    <FilterAnalyticsComponent view="globalanalytics"></FilterAnalyticsComponent>
    <FilterComponent view="analytics-1D"></FilterComponent>
    <div class="container">
      <div class="wrapper">
        <div class="box a">
          <div class="box-description">
            <h4>Feedback di rinforzo</h4>
          </div>

        </div>
        <div class="box b">
          <div class="box-description">
            <h4>Feedback positivi</h4>
          </div>

        </div>

        <div class="box c">
          <div class="box-description">
            <h4>Last Feedback</h4>
          </div>

        </div>
      </div>
    </div>
  </div>
</template>

<script>
import FilterComponent from '@/components/global/FilterComponent.vue'
import FilterAnalyticsComponent from '../global/FilterAnalyticsComponent.vue';
import MenuComponent from '../global/MenuComponent.vue';

export default {
  name: 'GlobalAnalyticsComponent',
  components: {
    FilterComponent,
    FilterAnalyticsComponent,
    MenuComponent
  }
}
</script>

<style scoped>
.container {
  width: 90%;
  margin-left: 5%;
  margin-right: 5%;
  margin-top: 20px;
}

.wrapper {
  display: grid;
  grid-template-columns: auto auto;
  grid-gap: 40px;
}

.box {
  color: #fff;
  border-radius: 4px;
  font-size: 13px;
  text-align: left;
  height: 150px;
  background-color: #F9F9F9;

}

.box-description {
  color: #ec8c6c;
  margin: 10px;
}

.a {
  grid-column: 1/2;
  grid-row: 1/2;
}

.b {
  grid-column: 2/3;
  grid-row: 1/2;
}

.c {
  grid-column: 1/3;
  grid-row: 2/3;
}


@media (max-width: 720px) {
  .container {
    width: 96%;
    margin-left: 2%;
    margin-right: 2%;
    margin-top: 20px;
  }

  .a {
    grid-column: 1/3;
    grid-row: 1/2;
  }

  .b {
    grid-column: 1/3;
    grid-row: 2/3;
  }

  .c {
    grid-column: 1/3;
    grid-row: 3/4;
  }
}
</style>