nav {
 display: grid;
 grid-template-columns: repeat(4, 1fr);
 grid-template-rows: repeat(2, 1fr);
 gap: 10px;
 grid-auto-flow: row;
 margin-bottom:15px;
}

/*
nav a:nth-child(2),
nav a:nth-child(3) {
 display: none !important;
}
*/


.links {
 background: #f2f2f2;
 border-radius: 12px;
 text-align: center;
 padding: 10px;
 padding-bottom:15px;
 display: flex;
 flex-direction: column;
 justify-content: center;
 align-items: center;

 font-size: 15px;
 font-weight: bold;

 transition: all 0.3s ease-in-out;
 box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);
}

.links:hover {
 transform: scale(1.03);
 box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
}

.links:focus {
 outline: none;
}

.active {
 background: #3976a9;
 color: #ffffff;
 box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
}

.icon {
 font-size: 1.5em;
 color: #333;
}