/***********************************************/
/* --------- Generic Wayfinder  --------- */
/***********************************************/
.wayfinder_svg-image-mask {
  height: 100%;

  background-size: cover;
  background-position: right center;
  -webkit-mask: url("https://441675180.fs1.hubspotusercontent-ap1.net/hubfs/441675180/Website_assets/Wayfinder_image_mask.svg") center / contain no-repeat;
  mask: url("https://441675180.fs1.hubspotusercontent-ap1.net/hubfs/441675180/Website_assets/Wayfinder_image_mask.svg") center / contain no-repeat;
  overflow: hidden;
}


.wayfinder_image-box {
position: relative;
}

.wayfinder_svg-wayfinder-mask {
position: absolute;
inset: 0;

-webkit-mask: url("https://441675180.fs1.hubspotusercontent-ap1.net/hubfs/441675180/02_Device/Prepared_Arrow_6_Periwinkle_Border%20.svg ") right center / contain no-repeat;
mask: url("https://441675180.fs1.hubspotusercontent-ap1.net/hubfs/441675180/02_Device/Prepared_Arrow_6_Periwinkle_Border%20.svg ") right center / contain no-repeat;
  
}

.wayfinder_image-row {
  display: flex;
  justify-content: center;
  align-items: stretch;
  gap: 1rem;
  padding-left:15px;
  padding-right:15px
}


.wayfinder_image-box {
aspect-ratio: 4 / 3; /* or whatever ratio matches your design */
  height: auto;
 border-radius: clamp(1rem, 1.6vw, 1.6rem)!important;  
  background-size: cover;
  background-position: center;
  transition: transform 0.3s ease;
}


.column-one {
width: 28%; 
max-width:517px;
}

.column-two {
 width: 30%;
 max-width:550px;
/*  background-color: #b0c4de;  */
}

.column-three {
width: 38%;
max-width:698px;
/* background-color: #c7b7f3; */

background-size: cover;
background-position: center center;

}

/* Hover effect */
.image-box:hover {
  transform: scale(1.03);
}


/* Wide Large desktop (e.g. 1440px+) */
@media (min-width: 1440px) {

}


/* Large desktop (e.g. 1024px+) */
@media (min-width: 1024px) and (max-width: 1440px) {

}


/* Tablet breakpoint: hide the right shape */
@media (max-width: 1024px) {

}


/* Mobile breakpoint: show only the left shape */
@media (max-width: 767px) {
  /* Hide the third column */
  .column-three {
    display: none;
  }

  /* Make the row behave like two equal-width columns */
.wayfinder_image-row {
    flex-direction: row;
    justify-content: space-between;
    gap: 2%;
  }

  /* Keep aspect ratio or fixed height */
 .wayfinder_image-box {
    height: auto;
    aspect-ratio: 4 / 2;
  }

  /* Adjust proportions so the two visible boxes span the full width */
  .column-one {
    width: 50%; /* smaller one */
    height: 42vw;
  }

  .column-two {
    width: 50%; /* larger one (40 + 58 + 2% gap = 100%) */
  }
}

/* Each block */
.wayfinder_image-box {
aspect-ratio: 3 / 4; 
 border-radius: clamp(0.5rem, 2vw, 2rem);  background-size: cover;
  background-position: center;
  transition: transform 0.3s ease;
}

.wayfinder_image-row {
overflow-y:hidden!important
  display: flex;
  justify-content: center; 
  align-items: center;    
  height: 365px;          
overflow:hidden!important;
} 





/* Wide Large desktop (e.g. 1440px+) */
@media (min-width: 1440px) {
  .wayfinder_image-row {
    overflow-y: hidden !important;
    /* height scales with viewport width, min 360px, max 500px */
    height: clamp(358px, 25vw, 300px);
  }

  .column-two,
  .column-three {
    height: 100%; 
  }
}



/* Large desktop (e.g. 1024px+) */
@media (min-width: 1024px) and (max-width: 1440px) {

  .wayfinder_image-row {overflow-y:hidden!important; height: 25.5vw!important;}
.column-two { height: 24.5vw;}
.column-three { height: 24.5vw;}
}



/* Tablet breakpoint: hide the right shape */
@media (max-width: 1024px) {
 .wayfinder_image-row {overflow-y:hidden!important; height: 25vw!important;}
.column-two { height: 24.5vw;}
.column-three { height: 24.5vw;}
}



/* Mobile breakpoint: show only the left shape */
@media (max-width: 767px) {
 .wayfinder_image-row { overflow-y:hidden!important; height: 41.5vw!important; }
.column-two { height: 41.5vw;}

}