display:none not correctly working on mobile - html

Question

there ho here's a CSS code, I want to hide it on PC view but visible on Phone view, I'm able to achieve my results on PC, but not on Phone, because display: none; is interfering with the code's work. Can anyone please check it?
/* --------- Game-section-mobile---------*/
* {
transition: all .155s ease-in-out;
}
.event-link {
margin: 300px 0 0 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
text-decoration: none;
}
.event-h3 {
margin-top: 30px;
}
.events {
display: flex;
flex-wrap: wrap;
display: none;
}
.events .shadowbox {
height: 100vh;
padding-top: 0;
background: rgba(0, 0, 0, 0.5);
}
.event {
text-align: center;
margin-top: 0;
min-width: 100px;
background-repeat: no-repeat;
}
.event .event-h3 {
padding-top: 50px;
}
.event {
background-size: cover;
background-position: center;
height: 100vh;
flex-grow: 1;
flex-basis: 0;
text-align: center;
min-width: 100px;
background-repeat: no-repeat;
}
.event:hover {
flex-grow: 2;
}
.events .shadowbox:hover {
background: rgba(0, 0, 0, 0.76);
}
.event .event-h3,
.event p {
color: white;
width: 90%;
margin: auto;
}
.event:not(:first-of-type) {
border-left: 1px solid white;
}
.shadowbox img{
margin-top: 50%;
height: 200px;
}
#media only screen and (max-width: 775px) {
.event:last-of-type {
margin-bottom: 10px;
}
.event:hover {
flex-grow: 1;
}
.event:nth-of-type(1) {
max-width: 100%;
}
.event {
min-width: 300px;
margin-bottom: 3px;
}
.shadowbox img{
margin-top: 50%;
height: 150px;
}
}
#media only screen and (max-width: 775px){
.events{
display: block;
}
}

Answer 1

You have a second media query for .events. So when your screen width is smaller than 775px, your .events will get displayed again. Which is the case on a mobile view. Delete or comment it out, and it should work.
#media only screen and (max-width: 775px){
.events{
display: block;
}
}