@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-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-feature:first-child{
  margin-left: 0;
}
.text-below-feature:last-child{
  margin-right: 0;
}

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

.text-below-feature > div,
.text-below-feature > 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;
}

.text-below-feature > div:nth-child(2),
.text-below-feature > 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;
}

.text-below-feature .tile-marketing-flag {
  display: block;
  color: #007fc4;
  font-weight: normal;
  margin-top: 0;
  font-size: 2.9333333333vw;
}

.all-link {
  display: inline-flex;
  align-items: center;
  color: #003764;
  font-weight: bold;
  font-size: 3.2vw;
  line-height: normal;
  margin: 2.9333333333vw 0 0.8vw;
  margin-left: 2.13333vw;
  text-align: center;
}
.all-link img {
  width: 3.2vw;
  height: 2.6666666667vw;
  margin-right: 1.3333333333vw;
}
@media (min-width: 768px) {
  .all-link {
    text-align: left;
    font-size: min(1.2820512821vw, 16px);
    margin-top: min(0.9615384615vw, 12px);
    margin-left: 0;
    margin-bottom: 0;
    /* margin-left: min(0.641025641vw, 8px); */
  }
  .all-link img {
    width: min(1.4423076923vw, 18px);
    height: min(1.2820512821vw, 16px);
    margin-right: min(0.5608974359vw, 7px);
  }
}

@media (max-width: 767px){
  .mobile-bigger-text .text-below-feature > div,
  .mobile-bigger-text .text-below-feature > p{
    font-size: 3.2vw;
  }

  .mobile-bigger-text .text-below-feature > div:nth-child(2),
  .mobile-bigger-text .text-below-feature > h3{
    font-size: 4.266666666666667vw;
  }
}

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

@media (min-width: 768px){
  .gray-bg > div:nth-child(3){
    position: relative;
  }
  .gray-bg > div:nth-child(3)::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: min(27.65625vw, 354px);
    background: #cccccc;
    z-index: 0;
  }
  .gray-bg .tiles-wrapper{
    position: relative;
    margin: 0 auto;
    border-left: min(1.328125vw, 17px) solid #fff;
    border-right: min(1.328125vw, 17px) solid #fff;
    background: #fff;
  }
  .gray-bg.two-tiles-wide .tiles-wrapper{
    width: min(51.875vw, 664px);
  }
  .gray-bg.three-tiles-wide .tiles-wrapper{
    width: min(77.34375vw, 990px);
  }



  .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-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);
  }
  .text-below-feature > div,
  .text-below-feature > p{
    font-size: clamp(10px, 1.09375vw, 14px);
    line-height: min(1.640625vw, 21px);
    padding: 0;
  }

  .text-below-feature > div:nth-child(2),
  .text-below-feature > h3{
    font-size: clamp(13px, 1.71875vw, 22px);
    padding: 0;
  }

  .text-below-feature .tile-marketing-flag {
    margin-top: min(0.3205128205vw, 4px);
    font-size: min(1.1217948718vw, 14px);
  }

  .desktop-no-textwrap .text-below-feature > div,
  .desktop-no-textwrap .text-below-feature > p{
    white-space: nowrap;
  }

  .desktop-normal-textwrap .text-below-feature > div,
  .desktop-normal-textwrap .text-below-feature > p{
    white-space: normal;
  }
  
  .no-carousel,
  .five-or-less.tiles-wrapper {
    display: flex;
    width: 100%;
    justify-content: space-between;
  }

  .tile-width-254 .text-below-feature{
    min-width: min(19.84375vw, 254px);
    max-width: min(19.84375vw, 254px);
    width: min(19.84375vw, 254px);
  }

  .tile-width-244 .text-below-feature,
  .five-tiles .text-below-feature{
    min-width: min(19.0625vw, 244px);
    max-width: min(19.0625vw, 244px);
    width: min(19.0625vw, 244px);
  }

  .tile-width-220 .text-below-feature,
  .five-and-half-tiles .text-below-feature{
    min-width: min(17.1875vw, 220px);
    max-width: min(17.1875vw, 220px);
    width: min(17.1875vw, 220px);
  }

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

  .tile-width-308 .text-below-feature,
  .four-tiles .text-below-feature{
    min-width: min(24.0625vw, 308px);
    max-width: min(24.0625vw, 308px);
    width: min(24.0625vw, 308px);
  }

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