Netflix Showcase

<div class="download row col-12">

          <div class="col-6 left">

            <img src="assets/img/mobile-0819.jpg" />

            <div class="animation row">

              <div class="boxshot col-3">
                <img src="assets/img/boxshot.png" />
              </div>

              <div class="text col-6">
                <h1>Stranger Things</h1>
                <p>Downloading...</p>
              </div>

              <div class="icon col-3">
                <img src="assets/img/download-icon.gif"/>
              </div>

            </div>
          </div>

          <div class="col-6 right">
            <h1>Download your shows to watch offline.</h1>
            <p>Save your favorites easily and always have something to watch.</p>
          </div>

        </div>



#showcase .download {
  height: 400px;
  border-bottom: 8px solid rgb(34, 34, 34);
}

#showcase .download .left {
  position: relative;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}


#showcase .download .left img {
    max-width: 88%;
    height: auto;
    margin: auto;
    margin-top: 12%;
}

#showcase .download .left .animation {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  margin-top: 50%;
  background-color: #000;
  border: 1px solid grey;
  border-radius: 10px;
  height: 95px;
  width: 63%;
  padding: 5px;
}

#showcase .download .left .animation .boxshot {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0;
}

#showcase .download .left .animation .boxshot img {
  margin: 0;
  height: 80%;
  width:  auto;
}

#showcase .download .left .animation .text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0;
}

#showcase .download .left .animation .text h1 {
  color:  #fff;
  font-family: "Netflix Sans Medium";
  font-size:  17px;
  margin-bottom: 0;
}

#showcase .download .left .animation .text p {
  color:  #0071eb;
  font-family: "Netflix Sans Regular";
  font-size:  15px;
  margin-bottom: 0;
}

#showcase .download .left .animation .icon {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0;
}

#showcase .download .left .animation .icon img {
  margin: auto;
}

#showcase .download .right {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  padding-left: 50px;
  padding-right: 10px;
}
/* #ffffff */
/* rgb(255,255,255) */

#showcase .download .right h1 {
  color: #fff;
  font-family: "Netflix Sans Medium";
  font-size:  49px;
  margin-bottom: 18px;
}

#showcase .download .right p {
  color:  #fff;
  font-family: "Netflix Sans Regular";
  font-size:  25px;
  line-height: 32px;
}