testing css layout in firefox vs safari on ios - html

Question

I would really appreciate it if someone can enlighten me with my css layout issue. On my localhost, I am using Firefox's responsive design mode tool to check my layout in iPhoneX and everything seems to be going according to plan. However, when I deploy it to Heroku, and open the page, everything goes haywire. Here is what it looks like:
*EDIT: The one on the left is from Firefox's Responsive Design Mode, the one on the right is the from iOs' Safari.
First of all, forgive my naivete but I was thinking that the simulation in Firefox should match the actual output in iOs Safari otherwise it would be difficult to test layouts. :) So the code snippet can verify this when you run the snippet on mobile it replicates my exact issue.
Secondly, I can't for the life of me, see what actually I am doing wrong with my CSS. (facepalm). Again, any help is appreciated.
#splash-bg {
height: 150px;
width: 100vw;
background: url("https://images.unsplash.com/photo-1425326452142-67c31f601d2f?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2982&q=80") no-repeat center 50px fixed;
background-size: contain;
border: 1px solid black;
}
#brand-info {
width: 100%;
display: flex;
flex-direction: column-reverse;
}
#brand-info #desc {
padding: 20px;
background-color: #ffd400;
}
#brand-info #desc img {
width: 100%;
max-height: 50px;
margin: 20px 0 10px 0;
border: 1px solid black;
}
#brand-info #desc p {
text-align: justify;
font-size: 0.8em;
line-height: 1.2em;
color: #000;
}
#brand-info #desc .social {
display: flex;
flex-direction: columns;
justify-content: space-evenly;
margin-top: 50px;
}
#brand-info .store-slides {
grid-column: 1 / 11;
grid-row: 1 / 4;
display: grid;
grid-template-columns: repeat(10, 1fr);
grid-template-rows: repeat(10, 1fr);
background-color: #ffd400;
// width: 100vw;
}
#brand-info .store-slides .brand-stores {
grid-column: 1 / 11;
grid-row: 1 / 11;
width: 100%;
display: grid;
grid-template-columns: repeat(10, 1fr);
grid-template-rows: repeat(10, 1fr);
}
#brand-info .store-slides .brand-stores img {
width: 100%;
height: 100%;
object-fit: contain;
grid-column: 1 / 11;
grid-row: 1 / 11;
border: 1px solid black;
}
#brand-info .store-slides .brand-stores .label {
grid-column: 4 / 11;
grid-row: 6 / 7;
font-size: 0.8em;
background-color: rgba(255, 212, 0, 0.5);
display: flex;
align-items: center;
padding: 0 0 0 20px;
color: #000;
font-weight: bold;
}
#brand-info .store-slides #left {
grid-column: 1 / 2;
grid-row: 5 / 7;
transform: rotate(90deg);
align-self: center;
justify-self: center;
}
#brand-info .store-slides #right {
grid-column: 10 / 11;
grid-row: 5 / 7;
transform: rotate(-90deg);
align-self: center;
justify-self: center;
}
<div id="fp-container">
<div id="splash-bg">
</div>
<div id="brand-info">
<div id="desc">
Brand Logo
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed malesuada ex eget enim lobortis dictum pharetra vel odio. Integer vulputate, ligula at placerat accumsan, nibh lectus consectetur metus, in consectetur nulla nunc at ante. Morbi felis leo, pellentesque
sit amet enim sit amet, blandit malesuada lacus.
</p>
<div class="social">
instagram
<router-link to="/locator">facebook</router-link>
</div>
</div>
<div class="store-slides">
<div class="brand-stores">
<img src="https://images.unsplash.com/photo-1425326452142-67c31f601d2f?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2982&q=80" alt="" />
<div class="label">Store Name 1</div>
</div>
<div id="left" class="arrows">left arrow</div>
<div id="right" class="arrows">right arrow</div>
</div>
</div>
</div>