.side-by-side-wrap {position: relative;}
.side-by-side .grid { display: grid; grid-template-columns: repeat(2, 1fr); }
.side-by-side:not(.v3) .col-text { min-height: 550px; }
.side-by-side.v2 .col-text-container,
.side-by-side.v4 .col-text-container,
.side-by-side.v5 .col-text-container { order: 2; }
.side-by-side.v3 p a {color: #FFF; text-decoration: underline;}
.side-by-side.v3 h3,
.side-by-side.v4 h3 { color: #000; }
.side-by-side.v4 .image-bg { width: 120%; transform: translateX(-15%); }
.side-by-side.v4 .image-bg > img { object-fit: contain; }
.side-by-side.v4 .btn-primary {background: transparent; border-color: #f3a901;}
/* .side-by-side-square .col-text-container + div { aspect-ratio: 1; } */
.side-by-side-square:not(.v3) .col-text { min-height: 0 !important}
.side-by-side.v5 .image-bg { border-radius: 0 !important; }
.side-by-side.v5 .image-bg > img { border-radius: 30px; height: calc(50% - 9px) !important; }
.side-by-side.v5 .image-bg > img:nth-of-type(2) { top: unset; bottom: 0; }
.side-by-side.v5 .display-xl { font-size: 54px; max-width: 460px; }
.side-by-side.v5 .grid { grid-template-columns: 430px auto; }
.side-by-side .bg-cream { background-color: var(--bg, #F3F0E5); }

.side-by-side.v3.no-tag .p-60 {padding-top: 0;}

.side-by-side.v6.no-top-img .image-bg {border-top-right-radius: 70px; border-top-left-radius: 70px;}
.side-by-side.v6 .image-bg {border-top-right-radius: 0; border-top-left-radius: 0; width: 100%;}
.side-by-side.v6 .top-img {border-top-right-radius: 10px; border-top-left-radius: 10px; aspect-ratio: 3 / 1; object-fit: cover; width: 100%;;}

.boxes-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 34px; padding: 0 40px;}
.boxes-grid > div { min-height: 150px; display: block; line-height: 100%; background: #1f1f1f; font-size: 126px;  font-family: "Heading Now 57"; font-weight: 700; color: #f8f7f1;}
.boxes-grid small {display: block; font-size: 22px; font-family: "Heading Now 57"; font-weight: 700; letter-spacing: 1px; color: #f8f7f1; line-height: 1.5;}

.side-by-side-stats {color: #f3f0e7; display: flex; flex-direction: column; }
.side-by-side-stats-eyebrow { font-size: 12px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; opacity: 0.85; margin-bottom: 20px; }
.side-by-side-stats-list { border-top: 1.5px solid #4c0e0c; margin-bottom: 70px; }
.side-by-side-stats-row { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 12px 0; border-bottom: 1.5px solid #4c0e0c; line-height:0.5;}
.side-by-side-stats-label { font-size: 24px; font-weight: 500; }
.side-by-side-stats-value { font-size: 48px; font-weight: 600; line-height: 1; white-space: nowrap; font-family: "Heading Now 57"; }
.side-by-side-focus-areas { display: flex; flex-wrap: wrap; gap: 12px; }
.side-by-side-focus-area-pill { display: inline-block; border: 2px solid #000; border-radius: 10px; padding: 7px 22px; font-size: 20px; font-weight: 600; }
.side-by-side {padding-bottom: 50px;}
.side-by-side-disclaimer { font-size: 15px; color: #FFF; opacity: 0.65;  text-align: center; padding-top: 30px;}
.v-8-gradient {position: absolute; top: -310px; height: 300px; width: 100%; pointer-events: none; z-index: 1;}




@media only screen and (max-width: 1200px) {
  .side-by-side-square .col-text-container + div { aspect-ratio: unset; }
}


@media only screen and (max-width:991px) {
	.side-by-side .grid,
	.side-by-side.v5 .grid { grid-template-columns: repeat(1, 1fr); }
	.side-by-side .p-60 { padding: 45px; }
  .side-by-side-square .col-text-container + div { aspect-ratio: 1; }
  .boxes-grid { grid-template-columns: repeat(2, 1fr); }
}


@media only screen and (max-width: 766px) {
	.side-by-side:not(.v3) .col-text-container { order: 2; }
	.side-by-side .image-bg { min-height: 280px; }
	.side-by-side:not(.v3) .col-text { min-height: 1px; }
	.side-by-side.v3 .col-text { padding-bottom: 0; }
  .side-by-side.v4 .image-bg { width: 100%; transform: translateX(0); }
  .boxes-grid { grid-template-columns: repeat(1, 1fr);  padding-left: 0; padding-right: 0;}
  .boxes-grid > div {font-size: 100px; max-height: 200px;}
  .side-by-side .pl-60 { padding-left: 15px; }
  

  .side-by-side p:last-child {margin-bottom: 0}

  .side-by-side.v5 .image-bg > img {border-radius: 20px;}

  .side-by-side.v5 .display-xl {font-size: 36px;}

  .side-by-side.v3 {padding-left: 25px; padding-right: 25px;}
  
  .side-by-side.v6.no-top-img .image-bg,
  .side-by-side.v6 .top-img {border-top-left-radius: 25px; border-top-right-radius: 25px}

  .side-by-side-square .col-text-container + div {aspect-ratio: auto;}
  
  
}