Mobile styling issues on a custom element

Site URL: https://intuitive-wellbeing.squarespace.com/retreats

I'm wondering why on mobile this rotating text animation won't move the text to a new line? 

https://share.getcloudapp.com/mXurDQX2

// ✦ ROTATING TEXT ✦ //

.sp-intro {
width: 90%;
max-width: 90%;
text-align: center;
margin: 0 auto;
}
.sp-headline {
  margin: 0 !important;
}
.sp-intro, .sp-words-wrapper {
h3, b, i, p, span {
font-weight: 300;
}
}
.sp-words-wrapper {
display: inline-block;
position: relative;
text-align: left;
width: auto !important;
}

.sp-words-wrapper b {
display: inline-block;
position: absolute;
white-space: nowrap;
left: 0;
top: 0;
}
.sp-words-wrapper b.is-visible {
position: relative;
}
.no-js .sp-words-wrapper b {
opacity: 0;
}
.no-js .sp-words-wrapper b.is-visible {
opacity: 1;
}

.is-visible {
  overflow: visible!important;
}

.sp-headline.slide span {
display: inline-block;
padding: 0;
}
.sp-headline.slide .sp-words-wrapper {
overflow: hidden;
vertical-align: bottom;
width: auto;
}
.sp-headline.slide b {
opacity: 0;
top: .2em;
}
.sp-headline.slide b.is-visible {
top: 0;
opacity: 1;
-webkit-animation: slide-in 0.6s;
-moz-animation: slide-in 0.6s;
animation: slide-in 0.6s;
}
.sp-headline.slide b.is-hidden {
-webkit-animation: slide-out 0.6s;
-moz-animation: slide-out 0.6s;
animation: slide-out 0.6s;
}

@-webkit-keyframes slide-in {
0% {
opacity: 0;
-webkit-transform: translateY(-100%);
}
60% {
opacity: 1;
-webkit-transform: translateY(20%);
}
100% {
opacity: 1;
-webkit-transform: translateY(0);
}
}
@-moz-keyframes slide-in {
0% {
opacity: 0;
-moz-transform: translateY(-100%);
}
60% {
opacity: 1;
-moz-transform: translateY(20%);
}
100% {
opacity: 1;
-moz-transform: translateY(0);
}
}
@keyframes slide-in {
0% {
opacity: 0;
-webkit-transform: translateY(-100%);
-moz-transform: translateY(-100%);
-ms-transform: translateY(-100%);
-o-transform: translateY(-100%);
transform: translateY(-100%);
}
60% {
opacity: 1;
-webkit-transform: translateY(20%);
-moz-transform: translateY(20%);
-ms-transform: translateY(20%);
-o-transform: translateY(20%);
transform: translateY(20%);
}
100% {
opacity: 1;
-webkit-transform: translateY(0);
-moz-transform: translateY(0);
-ms-transform: translateY(0);
-o-transform: translateY(0);
transform: translateY(0);
}
}
@-webkit-keyframes slide-out {
0% {
opacity: 1;
-webkit-transform: translateY(0);
}
60% {
opacity: 0;
-webkit-transform: translateY(120%);
}
100% {
opacity: 0;
-webkit-transform: translateY(100%);
}
}
@-moz-keyframes slide-out {
0% {
opacity: 1;
-moz-transform: translateY(0);
}
60% {
opacity: 0;
-moz-transform: translateY(120%);
}
100% {
opacity: 0;
-moz-transform: translateY(100%);
}
}
@keyframes slide-out {
0% {
opacity: 1;
-webkit-transform: translateY(0);
-moz-transform: translateY(0);
-ms-transform: translateY(0);
-o-transform: translateY(0);
transform: translateY(0);
}
60% {
opacity: 0;
-webkit-transform: translateY(120%);
-moz-transform: translateY(120%);
-ms-transform: translateY(120%);
-o-transform: translateY(120%);
transform: translateY(120%);
}
100% {
opacity: 0;
-webkit-transform: translateY(100%);
-moz-transform: translateY(100%);
-ms-transform: translateY(100%);
-o-transform: translateY(100%);
transform: translateY(100%);
}
}


@media screen and (max-width: 768px) {
 .sp-intro p, .sp-words-wrapper p, .sp-intro span, .sp-words-wrapper span {
    	font-size: 1rem!important;
  }
  .sp-words-wrapper {
		width: 100% !important;
}

}

Add to Design > Custom CSS

/* Mobile animated text */
@media screen and (max-width:767px) {
.sp-headline.slide b {
    white-space: initial !important;
}
}