.swop18-copy {
  margin-top: 24px;
}

.swop18-copy-inner {
  background: #f2f2f2;
  overflow: hidden;
}

.swop18-copy-content {
  padding-top: 48px;
  padding-bottom: 48px;
  position: relative;
  z-index: 2;
  margin-bottom: -100px;
}

.swop18-copy-content:after {
  content: '';
  display: block;
  width: 100%;
  position: absolute;
  left: 0;
  top: 0;
  bottom: 100px;
  z-index: 1;
  background-image: -moz-linear-gradient(180deg, rgba(255, 255, 255, 0.00001) 0%, rgba(255, 255, 255, 0.8) 70%, #fff 100%);
  background-image: -webkit-linear-gradient(180deg, rgba(255, 255, 255, 0.00001) 0%, rgba(255, 255, 255, 0.8) 70%, #fff 100%);
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.00001) 0%, rgba(255, 255, 255, 0.8) 70%, #fff 100%);
}

.swop18-copy .swop18-dash {
  margin-bottom: 35px;
  position: relative;
  z-index: 2;
}

.swop18-copy .swop18-dash:last-child {
  margin-bottom: 0;
  margin-top: 35px;
}

.swop18-copy-text {
  position: relative;
  z-index: 3;
  padding: 0 24px;
  text-align: center;
}

.swop18-copy-text > p:first-child {
  margin-top: 0;
}

.swop18-copy-text > p:last-child {
  margin-bottom: 0;
}

.swop18-copy-img {
  width: 100%;
  height: 0;
  padding-bottom: 95%;
  overflow: hidden;
  position: relative;
  z-index: 1;
}

.swop18-copy-img img {
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1;
}

img.swop18-copy-img-desktop {
  display: none;
}

.swop18-copy-img:before {
  content: '';
  display: block;
  width: 100%;
  height: 30%;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 2;
  background-image: -moz-linear-gradient(180deg, #fff 0%, rgba(255 ,255, 255, 0.8) 50%, rgba(255 ,255, 255, 0.00001) 100%);
  background-image: -webkit-linear-gradient(180deg, #fff 0%, rgba(255 ,255, 255, 0.8) 50%, rgba(255 ,255, 255, 0.00001) 100%);
  background-image: linear-gradient(180deg, #fff 0%, rgba(255 ,255, 255, 0.8) 50%, rgba(255 ,255, 255, 0.00001) 100%);
}

.swop18-copy-img .swop18-credit {
  right: 10px;
  bottom: 10px;
  z-index: 3;
}

@media all and (min-width: 768px) {
  .swop18-copy {
    margin-top: 48px;
  }
  
  .swop18-copy-inner {
    background: none;
  }
  
  .swop18-copy-content:after {
    display: none;
  }

  .swop18-copy-text {
    padding: 0 54px;
    margin: 0 auto;
    max-width: 1000px;
  }
  
  .swop18-copy-img {
    padding-bottom: 68.247%;
  }

  img.swop18-copy-img-mobile {
    display: none;
  }

  img.swop18-copy-img-desktop {
    display: block;
  }

  .swop18-copy-img:before {
    content: '';
    display: block;
    width: 100%;
    height: 120px;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 2;
    background-image: -moz-linear-gradient(180deg, #fff 0%, #fff 10%, rgba(255 ,255, 255, 0.5) 60%, rgba(255 ,255, 255, 0.00001) 100%);
    background-image: -webkit-linear-gradient(180deg, #fff 0%, #fff 10%, rgba(255 ,255, 255, 0.5) 60%, rgba(255 ,255, 255, 0.00001) 100%);
    background-image: linear-gradient(180deg, #fff 0%, #fff 10%, rgba(255 ,255, 255, 0.5) 60%, rgba(255 ,255, 255, 0.00001) 100%);
  }
}

@media all and (min-width: 1000px) {
  .swop18-copy-content {
    margin-bottom: -150px;
  }

  .swop18-copy-img:before {
    height: 170px;
  }
}

@media all and (min-width: 1200px) {
  .swop18-copy-content {
    padding-top: 48px;
    padding-bottom: 48px;
    margin-bottom: -200px;
  }

  .swop18-copy-img:before {
    height: 220px;
  }
}