.related-content {
    position: relative;
    max-width: 1200px;
    padding: 0 20px;
    padding-top: 30px;
    margin: 0 auto 60px;
}

.related-content .title {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 40px;
  color: var(--gray);
  padding-bottom: 10px;
  line-height: 1;
}

.related-content .slides {
    display: grid;
    gap: 20px;
    grid-template-columns: 1fr;
}

.related-content .slide { position: relative; }

.related-content .slide .img-cont {
    position: relative;
    overflow: hidden;
}

.related-content .slide .img-cont img {
    display: block;
    width: 100%;
}

.related-content .slide .content-section { padding-top: 20px; }

.related-content .slide .content-section > *:last-child { margin-bottom: 0; }

/* slider */
.related-content .slides-wrapper {
    position: relative;
}

.related-content .slides.slick-slider {
    display: block;
    margin-left: -10px;
    margin-right: -10px;
}

.related-content .slides.slick-slider .slide { padding: 0 10px; }

.related-content .arrow-cont { display: none; }

.related-content .slick-dots {
  margin: 0;
  bottom: -30px;
}
.related-content .slick-dots li { margin: 0 -3px; }
.related-content .slick-dots li button:before,
.related-content .slick-dots li.slick-active button:before {
  color: var(--blue);
}

@media (min-width: 40em){
    .related-content .slides.custom-columns-2 { grid-template-columns: 1fr 1fr }
    .related-content .slides.custom-columns-3 { grid-template-columns: 1fr 1fr 1fr }
    .related-content .slides.custom-columns-4 { grid-template-columns: 1fr 1fr 1fr 1fr}

    .related-content .slides .slide {
        display: grid;
        gap: 20px;
        grid-template-columns: 1fr
    }

    .related-content .slides.image-width-6 .slide { grid-template-columns: 1fr 1fr }
    .related-content .slides.image-width-4 .slide { grid-template-columns: 1fr 2fr }
    .related-content .slides.image-width-3 .slide { grid-template-columns: 1fr 3fr }

    .related-content .slides .slide .content-section { padding: 0; }

    /* slider */
    .related-content .slides.slick-slider .slick-slide { display: grid; }
    .related-content .slides.slick-slider.image-width-6 .slide .content-section,
    .related-content .slides.slick-slider.image-width-6 .slide .content-section,
    .related-content .slides.slick-slider.image-width-6 .slide .content-section { padding-right: 60px;}

    /* Arrows */
    .related-content .slides-wrapper.pad,
    .related-content .title.pad { margin-left: 50px; }
    .related-content .arrow-cont .custom-arrow {
    	position: relative;
        width: var(--space-10);
        height: var(--space-10);
    	flex-shrink: 0;
    	padding: 0;
    	margin: 0;
    	background: var(--white);
        border-radius: var(--rounded-circle);
        box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
    	font-size: var(--text-xl);
    	color: var(--arrow-color);
    	pointer-events: all;
    }

    .related-content .arrow-cont .custom-arrow i {
    	position: absolute;
    	top: 50%;
    	left: 50%;
    	transform: translate(-50%, -50%);
    	display: block;
    	line-height: var(--leading-none);
    }

    .related-content .arrow-cont {
      display: flex;
      position: absolute;
      flex-direction: column;
      top: 20% !important;
      left: -60px;
    }
    .related-content .arrow-cont .custom-arrow {
      border-radius: 0;
      box-shadow: none;
      background-color: transparent;
      position: relative;
    }
    .related-content .arrow-cont .txt {
      display: inline-block;
      transform: rotate(-90deg) translateX(-34px);

      font-family: var(--font-display);
      text-transform: uppercase;
      color: var(--blue);
      font-size: 17px;
      font-weight: 900;
      letter-spacing: .02em;
    }
    .related-content .arrow-cont i {
      color: var(--blue);
      font-size: 17px;
    }
    .related-content .arrow-cont .custom-arrow:focus { outline: none; }
    .related-content .arrow-cont .custom-arrow.prev { margin-top: 40px; }
    .related-content .arrow-cont .custom-arrow.next > i { left: 64%; }
    .related-content .arrow-cont .custom-arrow.prev > i { top: 220%; }

    .related-content .arrow-cont .custom-arrow.fade .txt,
    .related-content .arrow-cont .custom-arrow.fade i { opacity: 50%; }

}