.content-50-50 {
  position: relative;
  margin-bottom: 0;
}

.content-50-50 .container {
  max-width: 1280px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 1rem;
  padding-right: 1rem;
}

.content-50-50 .row {
  align-items: center;
}

.content-50-50 .left-content .cta-button {
  margin-top: 30px;
}

.content-50-50 h2 {
  margin-top: 0;
}

.content-50-50 .paint-title {
  margin: 0 0 4rem;
  max-width: none;
}

.content-50-50 .paint-title h2 {
  font-size: 2.4rem;
}

.content-50-50 .left-content {
  display: flex;
  flex-direction: column;
}

.content-50-50 .left-content p {
  width: 100%;
}

.content-50-50 .right-content {
  margin-top: 30px;
}

.content-50-50 .row.flip .left-content {
  order: 2;
  padding-left: 3rem;
  padding-right: 1rem;
}

.content-50-50 .row.flip .right-content {
  order: 1;
  text-align: left;
  padding-right: 3rem;
  padding-left: 0;
}

.content-50-50 .right-content img {
  width: 100%;
  height: auto;
}

.content-50-50 .right-content .social-shares i {
  font-size: 44px;
  margin-right: 10px;
  transition: color 0.5s;
}

.content-50-50 .right-content .social-shares i:hover {
  color: #707070;
}

@media only screen and (min-width: 782px) {
  .content-50-50 .right-content {
    margin-top: 0;
  }

  .content-50-50 .left-content {
    justify-content: center;
  }
}

@media only screen and (min-width: 992px) {
  .content-50-50 .right-content {
    padding-left: 3rem;
  }

  .content-50-50 .left-content {
    padding-right: 3rem;
  }
}

@media only screen and (min-width: 1024px) {
  .content-50-50 .paint-title h2 {
    font-size: 3.5rem;
  }
}

@media only screen and (min-width: 1280px) {
  .content-50-50 .right-content {
    text-align: right;
  }

  .content-50-50 .right-content .social-shares i {
    margin-left: 10px;
    margin-right: 0;
  }
}

/* Brand palette for pagination: primary = active bullet, secondary = inactive.
   Let Swiper handle horizontal centring itself — don't override left/width here,
   or it fights the dynamic-bullets translateX(-50%) and pushes dots to the side. */
.content-50-50 .swiper-sculpture-gallery {
  --swiper-pagination-color: var(--wp--preset--color--primary);
  --swiper-pagination-bullet-inactive-color: var(--wp--preset--color--secondary);
  --swiper-pagination-bullet-inactive-opacity: 1;
  --swiper-pagination-bottom: 0;
}