/* === Custom Block Styling === */
.scrollingText {
  padding-top: var(--CB-padding-top);
  padding-right: var(--CB-padding-right);
  padding-bottom: var(--CB-padding-bottom);
  padding-left: var(--CB-padding-left);
  margin-top: var(--CB-margin-top);
  margin-bottom: var(--CB-margin-bottom);
  background-color: var(--CB-background-color);
}
/* == Image == */
.scrollingText__imageWrapper {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 20%;
  aspect-ratio: 1/1;
}
.scrollingText__image {
  height: 100%;
  width: 100%;
  object-fit: contain;
  object-position: center;
}
/* == Text == */
.scrollingText__textWrapper {
  font-size: var(--FC-font-size-64);
  font-weight: 700;
  color: var(--FC-white);
  font-family: var(--FC-secondary-font);
}
.scrollingText__spacer{
  padding-right: 16px;
}
.scrollingText__spacer::after{
  content: '';
  background-color: var(--FC-white);
  width: 5px;
  height: 100%;
  position: absolute;
  top: 0;
  left: -2px;
}


/* Making the white hat borer be on the top of the red bar */
.scrollingText__imageWrapper{
  bottom: 7px;
}
@media screen and (max-width: 1399.98px){
  .scrollingText__imageWrapper{
    bottom: 13px;
  }
}
@media screen and (max-width: 1199.98px){
  .scrollingText__imageWrapper{
    bottom: 18px;
  }
}
@media screen and (max-width: 991.98px){
  .scrollingText__imageWrapper{
    bottom: 26px;
  }
}
@media screen and (max-width: 767px){
  .scrollingText__imageWrapper{
    width: 150px;
    bottom: 24px;
  }
}