.swop20-topic {
  background: #87888a url(../../images/2020/topic/background.jpg) center bottom no-repeat;
  background-size: 100% auto;
  position: relative;
}

.swop20-topic .swop20-credit {
  margin-top: -32px;
}

.swop20-topic-container {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 1fr;
  grid-template-columns: 1fr;
}

.swop20 .swop20-topic-title {
  color: #fff;
  text-transform: uppercase;
  margin-bottom: 20px;
}

.swop20-topic-copy {
  color: #fff;
}

.swop20-topic-copy-callout {
  color: #f8bc1c;
}

.swop20-topic-image-left:not(.swop20-topic-image-mobile),
.swop20-topic-image-right:not(.swop20-topic-image-mobile) {
  display: none;
}

.swop20-topic-images-mobile {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 1fr;
  grid-template-columns: 1fr;
  margin-bottom: 56px;
}

.swop20-topic-son-preference .swop20-topic-images-mobile {
  -ms-grid-columns: 1fr 1fr;
  grid-template-columns: 1fr 1fr;
}

.swop20-topic-image-left {
  -ms-grid-column: 1;
}

.swop20-topic-image-right {
  -ms-grid-column: 2;
}

.swop20-topic-images-mobile img {
  width: 100%;
}

@media all and (min-width: 768px) {
  .swop20-topic .swop20-credit {
    top: 10px;
    left: 10px;
    margin: 0;
  }

  .swop20-topic:not(.swop20-topic-son-preference) .swop20-topic-container {
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: 46% 1fr;
    grid-template-columns: 46% 1fr;
  }

  .swop20-topic-son-preference .swop20-topic-content {
    margin: 0 32px;
  }

  .swop20-topic:not(.swop20-topic-son-preference) .swop20-topic-content {
    margin-left: 40px;
    -ms-grid-column: 2;
  }

  .swop20-topic:not(.swop20-topic-son-preference) .swop20-topic-image-left:not(.swop20-topic-image-mobile),
  .swop20-topic:not(.swop20-topic-son-preference) .swop20-topic-image-right:not(.swop20-topic-image-mobile) {
    display: block;
  }

  .swop20-topic:not(.swop20-topic-son-preference) .swop20-topic-image-left:not(.swop20-topic-image-mobile) {
    -ms-grid-column: 1;
  }

  .swop20-topic.swop20-topic-child-marriage .swop20-topic-image-left:not(.swop20-topic-image-mobile) {
    max-height: 602px;
  }

  .swop20-topic:not(.swop20-topic-son-preference) .swop20-topic-images-mobile {
    display: none;
  }

  .swop20-topic:not(.swop20-topic-son-preference) .swop20-topic-image-left {
    margin-bottom: 0;
  }
}

@media all and (min-width: 1200px) {
  .swop20-topic:not(.swop20-topic-son-preference) .swop20-topic-container {
    display: -ms-grid;
    display: grid;
  }

  .swop20-topic-son-preference .swop20-topic-container {
    -ms-grid-columns: 1fr 500px 1fr;
    grid-template-columns: 1fr 500px 1fr;
    min-height: 872px;
  }

  .swop20-topic .swop20-topic-image-left:not(.swop20-topic-image-mobile),
  .swop20-topic .swop20-topic-image-right:not(.swop20-topic-image-mobile) {
    display: block;
  }

  .swop20-topic .swop20-topic-images-mobile {
    display: none;
  }

  .swop20-topic-son-preference .swop20-topic-image-left:not(.swop20-topic-image-mobile),
  .swop20-topic-son-preference .swop20-topic-image-right:not(.swop20-topic-image-mobile) {
    margin-top: 50%;
    max-height: 348px;
  }

  .swop20-topic-son-preference .swop20-topic-image-left:not(.swop20-topic-image-mobile) {
    -ms-grid-column: 1;
  }

  .swop20-topic-content {
    -ms-grid-column: 2;
  }

  .swop20-topic-son-preference .swop20-topic-image-right:not(.swop20-topic-image-mobile) {
    -ms-grid-column: 3;
  }
}

/* IE only */
@media all and (min-width: 1200px) and (-ms-high-contrast: none), (-ms-high-contrast: active) {
  .swop20-topic-son-preference .swop20-topic-image-left:not(.swop20-topic-image-mobile),
  .swop20-topic-son-preference .swop20-topic-image-right:not(.swop20-topic-image-mobile) {
    margin-top: 20%;
  }
}

/* RTL */
@media all and (min-width: 768px) {
  .lang-ar .swop20-topic:not(.swop20-topic-son-preference) .swop20-topic-content {
    margin-left: 0;
    margin-right: 40px;
  }
}