diff2html/website/templates/pages/index/index.css

.screenshot {
  display: block;
  overflow: hidden;
}

.screenshot > img {
  width: 100%;
}

.screenshots-fan {
  margin-top: 50px;
}

.screenshots-fan .screenshot {
  position: relative;
  width: auto;
  display: inline-block;
  text-align: center;
}

.screenshots-fan .screenshot:last-child,
.screenshots-fan .screenshot:first-child {
  z-index: 2;
}

.screenshots-fan .screenshot {
  z-index: 3;
}

@media (min-width: 768px) {
  .screenshots-fan {
    position: relative;
    overflow: hidden;
    margin-top: 60px;
    height: 200px;
  }

  .screenshots-fan .screenshot {
    height: auto;
    top: 10px;
    width: 350px;
  }

  .screenshots-fan .screenshot:first-child,
  .screenshots-fan .screenshot:last-child {
    width: 250px;
    position: absolute;
    top: 65px;
  }

  .screenshots-fan .screenshot:first-child {
    left: 10px;
  }

  .screenshots-fan .screenshot:last-child {
    left: auto;
    right: 10px;
  }
}

@media (min-width: 992px) {
  .screenshots-fan {
    margin-top: 60px;
    height: 240px;
  }

  .screenshots-fan .screenshot {
    width: 400px;
  }

  .screenshots-fan .screenshot:first-child,
  .screenshots-fan .screenshot:last-child {
    width: 300px;
  }
}

@media (min-width: 1200px) {
  .screenshots-fan {
    margin-top: 80px;
    height: 380px;
  }

  .screenshots-fan .screenshot {
    width: 550px;
  }

  .screenshots-fan .screenshot:first-child,
  .screenshots-fan .screenshot:last-child {
    width: 450px;
  }
}

.img-snapshot1 {
  background-image: url('./images/snapshot-1.png');
  background-repeat: no-repeat;
  /* height: 50px;
  width: 50px; */
  display: inline-block;
}

.img-snapshot2 {
  background-image: url('./images/snapshot-2.png');
  background-repeat: no-repeat;
  /* height: 50px;
  width: 50px; */
  display: inline-block;
}

.img-snapshot3 {
  background-image: url('./images/snapshot-3.png');
  background-repeat: no-repeat;
  /* height: 50px;
  width: 50px; */
  display: inline-block;
}