@font-face {
    font-family: DIN_BLK;
    src: url('../fonts/ff_din_web_pro_bold/DINWebPro-Bold.eot');
    src: url('../fonts/ff_din_web_pro_bold/DINWebPro-Bold.eot?#iefix') format("embedded-opentype"), url('../fonts/ff_din_web_pro_bold/DINWebPro-Bold.woff') format("woff");
    font-weight: 700;
  }
  @font-face {
    font-family: DIN;
    src: url('../fonts/ff_din_web_pro_bold/DINWebPro-Bold.eot');
    src: url('../fonts/ff_din_web_pro_bold/DINWebPro-Bold.eot?#iefix') format("embedded-opentype"), url('../fonts/ff_din_web_pro_bold/DINWebPro-Bold.woff') format("woff");
    font-weight: 900;
  }
  @font-face {
    font-family: DIN;
    src: url('../fonts/ff_din_web_pro_medium/DINWebPro-Medium.eot');
    src: url('../fonts/ff_din_web_pro_medium/DINWebPro-Medium.eot?#iefix') format("embedded-opentype"), url('../fonts/ff_din_web_pro_medium/DINWebPro-Medium.woff') format("woff");
    font-weight: 500;
    /* == bold */
  }
  @font-face {
    font-family: DIN;
    src: url('../fonts/ff_din_web_pro_bold/DINWebPro-Bold.eot');
    src: url('../fonts/ff_din_web_pro_bold/DINWebPro-Bold.eot?#iefix') format("embedded-opentype"), url('../fonts/ff_din_web_pro_bold/DINWebPro-Bold.woff') format("woff");
    font-weight: 700;
    /* == bold */
  }
  @font-face {
    font-family: DIN;
    src: url('../fonts/ff_din_web_pro_regular/DINWebPro.eot');
    src: url('../fonts/ff_din_web_pro_regular/DINWebPro.eot?#iefix') format("embedded-opentype"), url('../fonts/ff_din_web_pro_regular/DINWebPro.woff') format("woff");
    font-weight: 400;
    /* == normal */
  }
  @font-face {
    font-family: DIN;
    src: url('../fonts/ff_din_web_pro_regular/DINWebPro.eot');
    src: url('../fonts/ff_din_web_pro_regular/DINWebPro.eot?#iefix') format("embedded-opentype"), url('../fonts/ff_din_web_pro_regular/DINWebPro.woff') format("woff");
    font-weight: 200;
  }
  @font-face {
    font-family: DIN;
    src: url('../fonts/ff_din_web_pro_light/DINWebPro-Light.eot');
    src: url('../fonts/ff_din_web_pro_light/DINWebPro-Light.eot?#iefix') format("embedded-opentype"), url('../fonts/ff_din_web_pro_light/DINWebPro-Light.woff') format("woff");
    font-weight: 100;
  }

  *{
    font-family: 'DIN', sans-serif;
    font-size: 25px;
    line-height: 32px;
    font-weight: 500;
    box-sizing: border-box;
    padding: 0;
    margin: 0;
  }
  .container{
    min-height: 100vh;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding-top: 1rem;
    padding-bottom: 1rem;
  }

  .grid{
    max-width: 870px;
    display: grid;
    grid-template-columns: 1fr 100px 2fr;
  }
img{
  max-width: 100%;
  height: auto;
}

.linecontainer{
  display: flex;
  justify-content: center;  
}

.line{
  width: 1px;
  height: 100%;
  background: black;
}
.left{
display: flex;
flex-direction: column;
justify-content: space-between;
    
}
.left > img:first-child{
width: 100%;
}

.left div{
  display: flex;
  justify-content: space-between;
  width: 100%;
}
.left div img{
  width: calc(33% - 10px);
}

@media (max-width: 870px){
  .grid{
    grid-template-columns: 1fr;
    max-width: 208px;
  }
  .line{
    width: 100%;
    height: 1px;
    margin-top: 36px;
    margin-bottom: 36px;
  }

  .linecontainer{
    display: block;
  }
  .left > img:first-child{
    margin-bottom: 36px;
  }
  *{    
    font-size: 18px;
    line-height: 25px;
  }
}