:root{
  --viewport--span--padding: 1rem;
  --viewport-span-widget-padding: 5rem;
  --parent-padding: 1rem;
}
.parent--flex {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -moz-flex;
  display: -webkit-flex;
  display: flex;
  text-align: center;
  flex-direction: column;
  justify-content: center;
  align-items:center;
  gap: 4rem;
}
.parent--flex .child {
  padding-inline: 15px;
  flex-shrink: 0;
  flex-grow: 0;
  flex-basis: 90%;
  max-width:90%;
}
.parent--grid{
  grid-template-columns: 1fr;
  display: grid;
  gap: 5rem;
}
.parent--text-capitalize{
  text-transform: capitalize;
}
.parent--text-uppercase{
  text-transform: uppercase;
}
.parent__newsletter-container h1 {
  margin-block: 0.2em;
}
.vp .parent__newsletter-container{
  padding: 1rem;
}
.parent,
.parent--headline-span{
  margin: auto;
}
.parent:not(.parent--headline){
  padding: var(--parent-padding);
}
.parent--narrow-padding:not(.parent--headline){
  padding: calc(var(--parent-padding)/4);
}
.parent--align-item{
  align-items: center;
}
.parent--line-clamp .child p{
  display: -webkit-box;
  line-clamp: 4;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.parent--headline-span{
  max-width: 1430px;
  padding-inline: 1.8rem;
  padding-block: 2rem;
}
.parent--introduction{
  & h1{
    font-size: clamp(2rem, 1.1071rem + 3.5714vw, 3.25rem);
    font-weight: 100;
  }
}
.parent--introduction .parent--custom-color {
  font-weight: 600; /* or any other weight you want */
}
.child picture{
  width: 100%; /* Ensure container takes full width of grid cell */
  height: 200px; /* Example fixed height for the container */
  overflow: hidden; /* Hide any overflow */
}
.child picture img{
  width: 100%;
  height: auto;
  border-radius: var(--border--border-radius);
  object-fit: cover;
}
.child .fa-brands{
  font-size: 50px;
}
.child--quote-text h3{
  font-weight: 600;
  font-size: 1.875rem;
}
.child--quote-text .material-icons{
  font-size: 5rem!important;
}
.child .material-icons,
.headline-child .material-icons{
  color: var(--brand--color--default);
}
.child__inner--flex{
  display: flex;
  gap: 20px;
  align-items: center;
  flex-wrap: wrap;
}
.child__inner--flex-end{
  justify-content: flex-end;
}
.child__inner--flex-space-between{
  justify-content: space-between;
}
.parent,
.parent--grid{
  width: 90%;
}
.vp--light-blue,
.parent--light-blue,
.child--light-blue{
  background-color: var(--corporate-light-blue);
}
.vp--lighter-blue,
.parent--lighter-blue{
  background-color: var(--corporate-blue);
  p, h1, h2, h3, h4{
    color:var(--white)
  }
}
.vp--blue,
.parent--blue{
  background-color: var(--corporate-blue-two);
}
.vp,
.parent{
  padding-block: var(--parent-padding);
}
.vp--light-blue p,
.parent--light-blue p{
  color: var(--color--brand--var-2);
}
.child .material-icons,
.child .fa-brands{
  font-size: 2.375rem;
}
.headline-child .material-icons,
.headline-child .material-symbols-outlined,
.headline-child .fa-brands{
  font-size: 4rem;
  color: #1929D6;
}
.headline-child h2{
  font-size: 1.6rem;
}
.parent--material-symbols-circles .material-symbols-outlined,
.parent--material-symbols-circles .material-icons,
.parent--material-symbols-circles .fa-brands{
  background-color: var(--corporate-light-blue);
  border-radius: 50%;
  font-size: 3rem;
  padding: 1rem;
}
.vp--blue,
.vp--lighter-blue,
.parent--blue,
.parent--lighter-blue{
  h1, h2, h3, h4, p, a, .material-icons{
    margin: 0px 0px 1rem 0px;
    color: var(--white);
  }
}
.parent--custom-color{
  color: #3a83f3;
}
h1{
  margin: 0px;
}
.vp--spacer-padding,
.parent--spacer-padding{
  padding-block: calc(var(--parent-padding) * 2.5);
}
.parent--headline{
  padding-inline: 0.5rem;
  padding-block: 3rem;
}
.parent--text-wrap .child, .footer__disclaimer--text-wrap{
  text-wrap: balance;
}
@media(width <= 503px){
  .parent--headline h1,
  .parent--center h1{
    font-size: 1.78em;
  }
}
@media (width >= 815px){
  .parent{
    width: 90%;
  }
}
@media (width >= 1184px){
  .parent{
    width: 60%;
  }
}
@media (width >= 1651px){
  .parent{
    width: 45%;
  }
}
@media (width >= 890px){
  .parent--grid{
    width: 95%;
  }
}
@media (width >= 737px){
  .parent--grid:not(.parent--quote-wrapper){
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    grid-auto-flow: dense;
  }
}
@media (width >= 1248px){
  .parent--quote-wrapper{
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (width >= 1347px){
  .parent--grid,
  .parent--grid-no-wrap{
    width: 80%;
  }
}
@media (width >= 1623px){
  .parent--grid,
  .parent--grid-no-wrap{
    width: 60%;
  }
}
@media (width >= 723px){
  .parent--center{
    width: 60%;
  }
}
@media (width >= 1034px){
  .parent--center{
    width: 40%;
  }
}
@media (width >= 1380px){
  .parent--center{
    width: 40%;
  }
}
@media (width >= 1500px){
  .parent--center{
    width: 35%;
  }
}
@media (width >= 702px){
  .parent--flex .child{
    flex-basis: 56.6666%;
    max-width: 56.666%;
  }
}
@media (width >= 1073px){
  .parent--flex{
    flex-direction: row;
    align-items: baseline;
    grid-auto-flow: 0px;
    gap: 0px;
  }
  .parent--flex .child{
    flex-basis: 30%;
    max-width: 30%;
  }
}
@media (width >= 1598px){
  .parent--flex .child{
    flex-basis: 20%;
    max-width: 20%;
  }
}