<div class="bg">
  <div class="ring"></div>
</div>
<div class="box">
  <div class="flap-top"></div>
  <div class="lid">
    <div class="tab"></div>
  </div>
  <div class="side">
    <div class="brand fullTextWrap">
      Sainsbury's
    </div>
    <div class="title c-w">
      CORN<br />FLAKES
    </div>
    <div class="tinyText c-w">
      <div>Lorem ipsum cereal dolor, cornflakes amet bran wholewheat goodness.</div>
    </div>
  </div>
  <div class="front">
    <div class="fullTextWrap brand c-y">
      <span>S</span>
      <span>A</span>
      <span>I</span>
      <span>N</span>
      <span>S</span>
      <span>B</span>
      <span>U</span>
      <span>R</span>
      <span>Y</span>
      <span>'S</span>
    </div>
    <div class="cornWrap">
      <div class="title c-r">CORN</div>
      <div class="weight">8 OZ NET</div>
    </div>
    <div class="title fullTextWrap c-r">
      <span>F</span>
      <span>L</span>
      <span>A</span>
      <span>K</span>
      <span>E</span>
      <span>S</span>
    </div>
    <div class="circles">
      <!-- could have done an svg or background patterns instead, butI feel these fkales deserve more DOM :) -->
      <span></span>
      <span></span>
      <span></span>
      <span></span>
      <span></span>
      <span></span>
      <span></span>
      <span></span>
      <span></span>
      <span></span>
      <span></span>
      <span></span>
      <span></span>
      <span></span>
      <span></span>
      <span></span>
      <span></span>
      <span></span>
      <span></span>
      <span></span>
      <span></span>
      <span></span>
      <span></span>
      <span></span>
      <span></span>
      <span></span>
      <span></span>
      <span></span>
      <span></span>
      <span></span>
      <span></span>
      <span></span>
      <span></span>
      <span></span>
      <span></span>
    </div>
    <div class="description">
      <div>crisp and mildly flavoured</div>
      <div>
        <span class="bold">1</span>/<span class="bold">3</span>
      </div>
    </div>
  </div>
  <div class="flap-bottom">
    <div></div>
  </div>
  <div class="bottom">
    <div class="title">CORNFLAKES</div>
    <div class="tab-hole"></div>
  </div>
</div>

$beige: #efe8d6;
$brown: #b99c6b;
$red: #d54028;
$yellow: #e1a52f;
$black: #444;

*, *::before, *::after { box-sizing: border-box; }

html {
  height: 100%;
}
body {
  overflow: hidden;
  font-size: 16px;
  height: 100%;
  color: $black;
  font-family: 'Montserrat', sans-serif;
  display: flex;
  align-items: center;
  justify-content: center;
  &:hover {
    .box {
      transform: rotate(10deg) scale(0.7) translateY(-3em);
      box-shadow: 0 0 5px 1px rgba(0, 0, 0, 0.3);
    }
    .bg {
      filter: blur(0);
    }
  }
}
.bg {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  background-color: #f9f9f9;
  background-image: 
    linear-gradient(90deg, rgba(180,0,0,.5) 50%, transparent 50%),
    linear-gradient(rgba(180,0,0,.5) 50%, transparent 50%);
  background-size: 15px 15px;
  z-index: 0;
  filter: blur(2px);
  transition: all 300ms ease-in;
}
.box {
  background: $beige;
  width: 25em;
  height: 35em;
  display: grid;
  grid-template-columns: 1fr 3fr;
  grid-template-rows: 1fr 27em 1fr;
  z-index: 1;
  transition: all 300ms ease-in;
  > div {
    padding: 0.5em;
  }
}

.c-w { color: $beige; }
.c-r { color: $red; }
.c-y { color: $yellow; }
.bold {
  font-weight: bold;
}

.lid {
  background: $yellow;
  position: relative;
  .tab {
    position: absolute;
    top: -0.75em;
    border-bottom: 0.8em solid $yellow;
    border-left: 1em solid transparent;
    border-right: 1em solid transparent;
    height: 0;
    width: 5em;
    left: 50%;
    margin-left: -2.5em;
  }
}
.side {
  background: $red;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  position: relative;
  .brand {
    margin-top: 6em;
  }
  .title {
    font-weight: 300;
    transform: rotate(-90deg) translateX(-100%);
    transform-origin: top left;
    position: absolute;
    top: 3.2em;
    left: 0.25em;
    font-size: 3.2em;
    line-height: 0.8em;
    lwtter-spacing: 0;

  }
  .tinyText {
    margin-top: auto;
    font-size: 0.3em;
    width: 80%;
  }
}
.fullTextWrap {
  display: flex;
  width: 100%;
  justify-content: space-between;
  flex-wrap: nowrap;
  letter-spacing: 0;
}
.front {
  display: flex; //solely for bottom-alignment of 'crisp and...' bit
  flex-direction: column;
  .brand {
    font-weight: 300;
    font-size: 2.5em;
    letter-spacing: -3px;
    line-height: 1em;
  }
  .title {
    font-size: 4.5em;
    letter-spacing: -3px;
    line-height: 0.8em;
  }
}
.cornWrap {
  display: flex;
  align-items: center;
}
.weight {
  font-size: 0.7em;
  margin-left: auto;
}
.circles {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  > span {
    background: $yellow;
    border-radius: 50%;
    width: 2.3em;
    height: 2.3em;
    margin-top: .2em;
  }
}
.description {
  margin-top: auto;
  display: flex;
  justify-content: space-between;
}
.flap-bottom {
  display: flex;
  flex-direction: column;
  padding: 0!important;
  div {
    margin-top: auto;
    height: 1.2em;
    background: $brown;
    box-shadow: 0 3px 3px -4px rgba(0, 0, 0, 0.5) inset
    
  }
}
.bottom {
  background: $yellow;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  position: relative;
  .title {
    transform: rotate(180deg);
    font-size: 1.8em;
    line-height: 0.5em;
    letter-spacing: -1px;
  }
  .tab-hole {
    position: absolute;
    bottom: 0;
    border-bottom: 0.8em solid $brown;
    border-left: 1em solid transparent;
    border-right: 1em solid transparent;
    height: 0;
    width: 5em;
    left: 50%;
    margin-left: -2.5em;
  }
}
.ring {
  position: absolute;
  bottom: 3em;
  right: 3em;
  opacity: 0.98;
  width: 5em;
  height: 5em;
  border-radius: 50%;
  border: 1em solid #c27a38;
  border-width: .5em .5em 0.1em 0.1em;
  box-shadow: 0 0 0 1px #b9712e inset, 0 0 0 1px #b9712e;
  filter: blur(0.5px);
  &::after {
    content: '';
    background: radial-gradient(70%, #a25f20, #d48943);
    box-shadow: 0 0 0 1px #a26933;
    width: 1em;
    height: 1em;
    position: absolute;
    border-radius: 50%;
    left: -1em;
    top: 3em;
  }
}