<div id="app">
  <main>
    <div class="layout-grid">
      <section>
        <div class="info-card">
          <div class="info-card__inner">
            <div class="info-card__display">
              <svg viewBox="0 0 36 36" class="pie-chart">
                <path class="pie-chart__1"
                      stroke-dasharray="100, 100"
                      d="M18 2.0845
                         a 15.9155 15.9155 0 0 1 0 31.831
                         a 15.9155 15.9155 0 0 1 0 -31.831"
                      />
                <path class="pie-chart__2"
                      stroke-dasharray="60, 100"
                      d="M18 2.0845
                         a 15.9155 15.9155 0 0 1 0 31.831
                         a 15.9155 15.9155 0 0 1 0 -31.831"
                      />
              </svg>
            </div>
            
            <div class="info-card__details">
              <span v-for="index in 4" :key="index"/>
            </div>
          </div>
        </div>
      </section>

      <aside>
        <span :key="index" v-for="index in 6"/>
      </aside>
    </div>
  </main>
</div>

* {
  box-sizing: border-box;
}

body {
  background: #FAFAFA;
}

main {
  padding: 50px;
}

.layout-grid {
  display: flex;
  gap: 60px;

  section {
    flex-grow: 1;
  }

  aside {
    width: 30%;

    span {
      display: block;
      height: 30px;
      background: #DBDBDB;
      margin-bottom: 20px;
      border-radius: 1000px;
    }
  }

  @media screen and (max-width: 800px) {
    flex-direction: column;
    aside {
      width: 100%;
    }
  }

}


.info-card {
  width: 100%;
  container-type: inline-size;
  container-name: info-card;
  border-radius: 5px;
  overflow: hidden;

  &__inner {
    display: flex;
    
    @container info-card (max-width: 500px) {
      flex-direction: column;
    }
  }

  &__display {
    width: 100%;
    min-height: 300px;
    background: #504b4b;
    border: 2px solid #1c1c1c;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  &__details {
    background: #FFF;
    width: 100%;
    border: 2px solid #D8D8D8;
    min-height: 300px;
    padding: 40px;
    display: flex;
    flex-direction: column;
    
    span {
      width: 100%;
      height: 15px;
      background: #DBDBDB;
      margin-bottom: 8px;
      border-radius: 1000px;

      &:first-of-type {
        background: #707070;
        margin-bottom: 20px;
        width: 60%;
        height: 20px;
      }

      &:last-of-type {
        width: 70%;
      }
    }
  }

}


.pie-chart {
  display: block;
  width: 100%;
  height: 10em;
  font-size: 1em;

  &__1 {
    stroke: #777;
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    animation: progress 1s ease-out forwards;
  }

  &__2 {
    stroke: #EEE;
    fill: none;
    stroke-width: 2;
  }
}

let app = new Vue({

  el: '#app',

})