.swop20-grid-row {
  font-size: 24px;
  line-height: 36px;
  overflow: hidden;
  background: #484747;
  position: relative;
}

.swop20-grid-row-inner {
  position: relative;
  z-index: 2;
}

.swop20-grid-img,
.swop20-grid-txt {
  transition: translate 1s ease-out;
}

/* --- Image --- */

.swop20-grid-img {
  background: center center no-repeat;
  background-size: cover;
  position: relative;
}

.swop20-grid-img-after {
  display: none;
}

.swop20-grid-img .swop20-credit {
  right: 10px;
  bottom: 10px;
  width: calc(100% - 20px);
  text-align: right;
}

/* Maintains row height relative to width but not taller than 650px. */
.swop20-grid-heighter {
  width: 100%;
  max-width: 720px;
}

.swop20-grid-heighter:after {
  content: '';
  display: block;
  width: 100%;
  height: 0;
  /* 650 / 720 */
  padding-bottom: 90.27%;
  overflow: hidden;
}

/* --- Text --- */

.swop20-grid-txt-img .swop20-grid-txt {
  background: #201f1f;
  color: #fff;
}

.swop20-grid-img-txt .swop20-grid-txt {
  background: #f8bc1c;
  color: #000;
}

.swop20-grid-txt-content {
  padding-top: 36px;
  padding-bottom: 36px;
}

/* --- Backgrounds --- */

.swop20-grid-row-bg-left,
.swop20-grid-row-bg-right {
  position: absolute;
  top: 0;
  width: 100%;
  height: 0;
  z-index: 1;
  background-repeat: no-repeat;
  background-size: cover;
}

.swop20-grid-row-bg-left {
  left: 0;
  background-position: top right;
  padding-bottom: 90.27%;
}

.swop20-grid-row-bg-right {
  display: none;
  right: 0;
  background-position: top left;
}

/* --- Responsive --- */

@media all and (min-width: 768px) {
  .swop20-grid-row-bg-left,
  .swop20-grid-row-bg-right {
    display: block;
    width: 50%;
    height: 100%;
    padding: 0;
  }

  .swop20-grid-row-inner {
    display: table;
    width: 100%;
  }

  .swop20-grid-row-inner-2 {
    display: table-row;
  }

  .swop20-grid-img,
  .swop20-grid-txt {
    display: table-cell;
    width: 50%;
    vertical-align: middle;
  }

  /* Image */
  .swop20-grid-img-txt .swop20-grid-img-after,
  .swop20-grid-txt-img .swop20-grid-img-before {
    display: none;
  }

  /* Text */
  .swop20-grid-txt-content {
    max-width: 550px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
  }

  .swop20-grid-txt-img .swop20-grid-txt-content {
    float: right;
  }

  .swop20-grid-img-txt .swop20-grid-txt-content {
    float: left;
  }
}

@media all and (min-width: 1160px) {
  .swop20-grid-txt-img .swop20-grid-txt-content {
    padding-left: 0;
  }

  .swop20-grid-img-txt .swop20-grid-txt-content {
    padding-right: 0;
  }
}

@media all and (min-width: 1200px) {
  .swop20-grid-txt-img .swop20-grid-txt-content {
    padding-right: 100px;
  }

  .swop20-grid-img-txt .swop20-grid-txt-content {
    padding-left: 100px;
  }
}