/*  =====================================
   Main Layout
========================================  */

.box-line a{
  color: #3a3a3a;
}

.box-line1 {
  padding-top: 3%;
  padding-bottom: 2%;
}

.box-line2 {
  padding-bottom: 2%;
}

/*  =====================================
   Layout Style
========================================  */

.box-item {
  border-top: 30px solid #eff0f1;
  background-color: rgba(255,165,0,0.5);
  padding: 0;
  border: 0;
  width: 300px;
  height: 200px;
  box-shadow: 0px 4px 7px 4px #a7a7a7;
}

.box-picture {
  position: relative;
  margin-top: -30px;
  left: 10%;
  height: 60px;
  width: 60px;
}

.test {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background-color: rgba(255,165,0,1);
  box-shadow: 0px 0px 0px 1px #000000;
}

.picture {
  position: relative;
  left: 11%;
  top: 10%;
  width: 45px;
  height: 45px;
}

.bestilling {
  padding-bottom: 1%;
}

.box-text h3, p {
  margin: 2% 5% 2%;
}

/*  =====================================
   Flex-Grid Layout
========================================  */

.main-body {
  display: grid;
}

.main-wrapper {
  display: grid;
  grid-template-rows: minmax(175px, 0.6fr) 1.2fr 1.2fr;
  grid-template-columns: 1fr;
}

.box-line1 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(225px, max-content));
  grid-auto-flow: column;
  grid-gap: 2% 3%;
  grid-row: -3 / -2;
  justify-content: center;
  align-items: center;
}

.box-line2 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(225px, max-content));
  grid-auto-flow: column;
  grid-gap: 2% 3%;
  grid-row: -2 / -1;
  justify-content: center;
  align-items: center;
}

/*  Mobile layout ------------------  */

@media screen and (max-width: 990px) {
  .main-wrapper {
    display: grid;
    grid-template-rows: 100px 1fr 0.5fr;
  }

  .box-line1, .box-line2 {
    display: flex;
    flex-wrap: wrap;
  }

   .box-item1, .box-item2, .box-item3, .box-item4, .box-item5 {
     margin: 0 3%;
  }
}