body{margin: 20px; font-family: "inter", sans-serif; background-color: #000; color: #ffffff;}
 a{text-decoration: none; color: #ffffff;}
.logo{text-align: center;}
.logo img{width: 50%;}
.navigation{display: flex; gap: 20px; justify-content: center; padding:40px 0;}
.nav-btn-active{padding: 1% 5%; border:1px #434343 solid;background-color: #434343; border-radius: 50px; font-size: 1rem; cursor: pointer;}
.nav-btn{padding: 1% 5%; border:1px #434343 solid; border-radius: 50px; font-size: 1rem;}
.nav-btn:hover{background-color: #232323; cursor: pointer;}


.show-grid{display: grid; grid-template-columns: auto auto auto auto auto; row-gap: 20px; column-gap: 15px;}
.show{text-align: center;}
.show:hover{transform:scale(1.05); cursor: pointer; z-index: 2;}
.show img{position: relative; width: 95%; height: auto;
background: linear-gradient(180deg, rgba(0, 0, 0, 0) 82.69%, rgba(0, 0, 0, 0.5) 100%);
border-radius: 10px;}

.show-info{display: block; text-align: left; }


/* RESPONSIVE STYLES */
@media screen and (max-width: 850px) {
    .show-grid{grid-template-columns: auto auto auto;}
}
@media screen and (max-width: 550px) {
    .show-grid{grid-template-columns: auto auto;}
    .show img{width: 90%;}
}