@media (max-width: 767px){
  .scroll-horizontally-when-mobile{
    display: block;
    padding: 0;
    margin: 0 auto;
    overflow-x: scroll;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
  }
  .scroll-horizontally-when-mobile::-webkit-scrollbar { display: none; }
  .tiles-wrapper {
    display: flex;
    width: 100%;
  }
}

.text-below-and-vertical-feature{
  position: relative;
  display: block;
  margin: 0 0.8vw;
  overflow: hidden;
  min-width: 35.46666666666667vw;
  max-width: 35.46666666666667vw;
  width: 35.46666666666667vw;
  height: auto;
  outline: none;
}
.text-below-and-vertical-feature:first-child{
  margin-left: 0;
}
.text-below-and-vertical-feature:last-child{
  margin-right: 0;
}

.text-below-and-vertical-feature img{
  display: block;
  width: 100%;
}

.image-wrapper{
  position: relative;
  margin: 0 auto;
}

.vertical-text{
  position: absolute;
  top: auto;
  bottom: 1%;
  left: 6%;
  display: block;
  color: #003764;
  margin: 0;
  padding: 0;
  white-space: nowrap;
  font-size: 2.4vw;
  letter-spacing: normal;
  font-weight: 500;
  width: 100%;
  text-align: left;
  transform-origin: center left;
  transform: rotate(-90deg);
}

.vertical-text-new,
.vertical-text-centered{
  position: absolute;
  top: 0;
  left: 100%;
  display: block;
  color: #003764;
  margin: 0;
  padding: 0 3%;
  white-space: nowrap;
  font-size: 2.6666666666666665vw;
  letter-spacing: normal;
  font-weight: normal;
  width: 100%;
  height: 100%;
  text-align: center;
  writing-mode: vertical-rl;
  transform-origin: center left;
  transform: rotate(180deg);
}

.vertical-text-new {
  text-align: left;
  padding: 4% 3%;
}

@media (max-width: 767px){
  .vertical-text.wrap-when-mobile{
    white-space: normal;
    left: 10.9%;
    bottom: -1.5%;
  }
}

@media (min-width: 768px) and (max-width:1023px){
  .vertical-text.wrap-when-tablet{
    white-space: normal;
    left: 10.9%;
    bottom: -1.5%;
  }
}

@media (min-width: 1024px){
  .vertical-text.wrap-when-desktop{
    white-space: normal;
    left: 8.9%;
    bottom: -1%;
  }
}

.bottom-text > h3{
  display: block;
  color: #003764;
  margin: 4% auto 1.9%;
  padding: 0 2%;
  white-space: pre-line;
  font-size: 3.466666666666667vw;
  letter-spacing: normal;
  font-weight: 500;
  width: 100%;
  text-align: center;
}

.bottom-text > p{
  display: block;
  color: #003764;
  margin: 0;
  padding: 0 2%;
  white-space: pre-line;
  font-size: 2.933333333333333vw;
  letter-spacing: normal;
  line-height: 4.8vw;
  font-weight: 300;
  width: 100%;
  text-align: center;
}

.three-tiles .text-below-and-vertical-feature{
  min-width: 57.06666666666666vw;
  max-width: 57.06666666666666vw;
  width: 57.06666666666666vw;
}

@media (min-width: 768px){
  .vi-banner .slick-arrow{
    bottom: auto;
    width: min(3.4375vw, 44px);
    height: min(3.4375vw, 44px);
    background-color: rgba(255,255,255,.75);
    top: min(12.265625vw, 157px);
    transition: background-color .25s ease-out;
  }
  .vi-banner .slick-arrow:hover{
    background-color: rgba(255,255,255,.9);
  }
  .text-below-and-vertical-feature{
    margin: 0; /* carousel calculates margin for us */
    min-width: min(17.1875vw, 220px);
    max-width: min(17.1875vw, 220px);
    width: min(17.1875vw, 220px);
  }
  .vertical-text{
    font-size: clamp(9px, 0.78125vw, 10px);
    padding: 0;
  }

  .vertical-text-new,
  .vertical-text-centered{
    font-size: clamp(10px, 1.09375vw, 14px);
  }

  .bottom-text > h3{
    font-size: clamp(13px, 1.71875vw, 22px);
    padding: 0;
  }

  .bottom-text > p{
    font-size: clamp(10px, 1.09375vw, 14px);
    line-height: min(1.640625vw, 21px);
    padding: 0;
  }

  .desktop-no-textwrap{
    white-space: nowrap;
  }

  .desktop-normal-textwrap{
    white-space: normal;
  }

  .no-carousel,
  .five-or-less.tiles-wrapper {
    display: flex;
    width: 100%;
    justify-content: space-between;
  }
  .five-tiles .text-below-and-vertical-feature{
    min-width: min(19.0625vw, 244px);
    max-width: min(19.0625vw, 244px);
    width: min(19.0625vw, 244px);
  }

  .six-tiles .text-below-and-vertical-feature{
    min-width: min(16vw, 204.8px);
    max-width: min(16vw, 204.8px);
    width: min(16vw, 204.8px);
  }

  .three-tiles .text-below-and-vertical-feature{
    min-width: min(32.5vw, 416px);
    max-width: min(32.5vw, 416px);
    width: min(32.5vw, 416px);
  }
}