Wordpress is crashing on Mobile due to CSS issue - css

Question

I am having issues with my Wordpress website. Whenever I use the following CSS. my website crashes on the mobile version (but not on the computer) "A problem repeatedly occurred on https://..."
.about-text .iwt-text {
font-size: 16px;
line-height: 1.38;
max-width: 245px;
}
#js {
display: none !important;
}
.about-text .iwt-icon img {
width: 19px;
height: 23px;
margin-top: 3px;
}
.about-heading {
text-transform: uppercase;
margin: 0 0 5% 0% !important;
}
.header {
padding-top:40px;
padding-bottom:30px;
}
.header h1 {
color:#000640;
}
/** SPEAKERS **/
#speaker h2 {
font-size: 36px;
font-weight: normal;
line-height: 1.11;
margin-bottom: .5em;
letter-spacing: 2px;
color: #000640;
}
#media (min-width: 1000px) {
#speaker h2 {
font-size: 120px;
font-weight: bold;
line-height: .67;
position: absolute;
bottom: 4px;
margin: 0;
margin-left: -7rem;
letter-spacing: 7.54px;
opacity: .44;
color: #dee0f1 !important;
}
#speaker h3, #speaker h1, #speaker p {
color: #fff !important;
}
#speaker h3 {
margin-top: 3rem;
}
#speaker p {
margin-bottom: 7rem !important;
}
#speaker .row-bg-wrap::after {
position: absolute;
top: 0;
left: -35vw;
display: block;
width: 123vw;
height: 100%;
content: '';
background: url(https://albertablockchain.com/wp-content/uploads/2020/01/group-1219.svg) center / cover no-repeat;
}
#speaker {
margin-top: 4rem;
}
#speaker img {
margin-top: -4rem;
}
}
#speaker h3 {
margin-bottom: 20px;
}
#speaker h1 {
font-size: 34px;
font-weight: bold;
margin-bottom: 35px;
letter-spacing: 1.5px;
}
#media (min-width: 1000px) {
#speaker p {
max-width: 414px;
margin-bottom: 15%;
}
}
div.speaker-line img {
width: 100%;
}
div.single-speaker {
display: flex;
flex-flow: column;
justify-content: space-between;
height: 100%;
padding: 1.5rem;
}
div.single-speaker div.top {
display: flex;
align-items: flex-start;
}
div.single-speaker div.top img {
width: 82px !important;
}
#media (max-width: 1000px) {
div.single-speaker div.top {
flex-flow: column;
}
}
div.single-speaker img {
width: auto;
margin-right: 1.5rem;
}
div.single-speaker img + div > p {
padding: 0;
}
div.single-speaker p {
line-height: 1.57;
color: #333;
}
div.single-speaker a {
font-size: 12px;
line-height: 1.83;
color: #3c4bd8;
}
div.single-speaker h2 {
font-size: 16px;
line-height: 1.56;
margin-top: 1em;
letter-spacing: 1.07px;
color: #142098;
}
div.popup-trigger {
cursor: pointer;
transition: box-shadow .3s ease-in-out;
box-shadow: 0 25px 81px -37px rgba(24, 27, 61, .27) !important;
}
div.popup-trigger:hover {
box-shadow: 0 25px 81px -37px rgba(24, 27, 61, .7) !important;
}
div.popup-trigger div.vc_column-inner > div.wpb_wrapper {
display: grid;
grid-template-rows: auto 1fr;
height: 100%;
}
div.popup-trigger div.wpb_raw_code > div.wpb_wrapper {
height: 100%;
}
/** SPEAKERS GRID */
.speakers {
display: grid;
gap: 1.5rem;
}
.speakers .item {
display: grid;
grid-template-rows: auto 1fr;
transition: box-shadow .3s ease-in-out;
border-radius: 4px;
background: #fff;
box-shadow: 0 25px 81px -37px rgba(24, 27, 61, .27);
}
.speakers .item.trigger {
cursor: pointer;
}
.speakers .item:hover {
box-shadow: 0 25px 81px -37px rgba(24, 27, 61, .7);
}
.speakers .item .img img {
width: 100%;
margin: 0;
}
#media (min-width: 1000px) {
.speakers {
grid-template-columns: repeat(3, 1fr);
}
}
#media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
.speakers {
display: flex;
flex-wrap: wrap;
}
.speakers .item {
display: flex;
flex-flow: column;
flex-basis: 30%;
}
}
.speaker-modal {
position: fixed;
z-index: 9999;
top: 0;
left: 0;
display: flex;
width: 100vw;
height: 100vh;
transform: scale(0);
pointer-events: none;
background: #fff;
}
.speaker-modal.active {
transform: scale(1);
pointer-events: all;
}
.speaker-modal .modal-image img {
width: 100% !important;
height: 100% !important;
object-fit: cover;
object-position: top;
}
.speaker-modal div.modal-left {
overflow-y: auto;
max-height: 100%;
padding: 6rem;
}
#media (min-width: 1000px) {
.speaker-modal > div {
flex-basis: 50%;
}
.speaker-modal div.modal-left {
display: flex;
align-items: flex-start;
flex-flow: column;
justify-content: center;
}
}
#media (max-width: 1000px) {
.speaker-modal div.modal-image {
max-height: 50vh;
}
}
.speaker-modal div.modal-left::-webkit-scrollbar {
width: 0;
}
.speaker-modal .js-close-modal {
position: absolute;
top: 3rem;
right: 3rem;
display: flex;
align-items: center;
justify-content: center;
width: 51px;
height: 51px;
content: '';
cursor: pointer;
border-radius: 100%;
background: #fff;
}
.speaker-modal .js-close-modal::after {
position: absolute;
display: block;
width: 25px;
height: 25px;
content: '';
background: url(https://albertablockchain.com/wp-content/plugins/VC_Modal_Popup/img/cross.png) no-repeat center center;
filter: brightness(0);
}
.speaker-modal div.modal-left img {
width: 164px !important;
object-fit: contain;
}
.speaker-modal div.modal-left h2 {
font-size: 20px;
line-height: 1.25;
margin-bottom: .5em;
letter-spacing: 1px;
color: #142098;
}
.speaker-modal div.modal-left a {
font-size: 12px;
line-height: 1.83;
color: #3c4bd8;
}
.speaker-modal .modal-social {
display: flex;
align-items: center;
}
.speaker-modal .modal-social i {
font-size: 20px;
color: #142098;
}
#media (max-width: 1000px) {
.speaker-modal {
flex-flow: column-reverse;
}
.speaker-modal div.modal-left {
padding: 1.5rem;
}
.speaker-modal .js-close-modal {
top: 1.5rem;
right: 1.5rem;
}
}
And when I go to change the code from overflow y 'auto' to overflow y 'hidden' it starts working again. The only thing is that I need it to be auto, because I have a modal popup that comes up