Ufdjrw

I have created a navbar in Bootstrap-4 and now Im trying to recreate it using CSS Grid. I've managed to get the navbar to be responsive but I cannot figure out how to make it collapse on mobile devices.
Here is the pen with the navbar using CSS Grid: Navbar with CSS Grid
Here is the navbar using Bootstrap CDN: Navbar with Bootstrap . I've tried adding the navbar-expand-sm and navbar-toggler to the CSS Grid but it breaks the layout. Any help would be really appreciated.

 <section class="wrapper">
<!-- navigation -->
<nav class="main-nav">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Products</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Gallery</a></li>
<li><a href="#">Resources</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</section>


/* CSS Variables */
:root 
--primary: #ddd;
--dark: #333;
--light: #fff;
--shadow: 0 1px 5px rgba(104, 104, 104, 0.8);

html 
 box-sizing: border-box;
 font-family: Arial, Helvetica;
 color: var(--dark);

body 
 background: #ccc;
 margin: 1.9rem .5rem;
 line-height: 1.4;

.wrapper 
 display: grid;
 grid-gap: 5px;

/* Navigation */
.main-nav ul 
 display: grid;
 grid-gap: 2px;
 padding: 0;
 list-style: none;
 grid-template-columns: repeat(auto-fit, minmax(1em, 1fr));

.main-nav a 
 background: var(--primary);
 display: block;
 text-decoration: none;
 padding: 1rem 0.4rem;
 text-align: center;
 color: var(--dark);
 text-transform: uppercase;
 font-size: 1rem;
 font-weight: bold;
 box-shadow: var(--shadow);

.main-nav a:hover 
 background: var(--dark);
 color: var(--light);


/* Media queries */ 
@media (max-width:768px) 
.main-nav a 
 font-weight: 500;
 font-size: .9rem;



@media(max-width:734px) 
.main-nav ul 
 grid-template-columns: 1fr;

.main-nav a 
 font-weight: 600;