* {
   box-sizing: border-box;
}
body {
   margin: 0;
   font-family: Arial, Helvetica, sans-serif;
   background: linear-gradient(135deg,#64d3ff 0%, #ff4e4e 100%);
}
header {
   width: 100%;
   background: linear-gradient(90deg, #2d3436 0%, #000000 100%);
   color: white;
   text-align: center;
   padding: 30px;
   box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}
header h1 {
   margin: 0;
   font-size: 40px;
   text-transform: uppercase;
}
.container {
   width: 100%;
   min-height: 100vh;
   display: flex;
   flex-direction: column;
   justify-content: space-between;
}
main {
   width: 100%;
   max-width: 1400px;
   margin: 0 auto;
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 30px;
   padding: 40px 20px;
}
.box {
   position: relative;
   width: 100%;
   aspect-ratio: 1 / 1;
   overflow: hidden;
   border: 5px solid rgba(255, 255, 255, 0.8);
   border-radius: 20px;
   cursor: pointer;
   box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
}
img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   transition: opacity 0.9s linear;
}
.hover_img {
   position: absolute;
   top: 0;
   left: 0;
   opacity: 0;
   width: 100%;
   height: 100%;
}
.box:hover img {
   opacity: 0;
}
.box:hover .hover_img {
   opacity: 1;
}
footer {
   width: 100%;
   background: linear-gradient(90deg, #2d3436 0%, #000000 100%);
   color: white;
   text-align: center;
   padding: 25px;
   box-shadow: 0 -4px 15px rgba(0, 0, 0, 0.3);
}
footer h2 {
   margin: 0;
   font-size: 1.3em;
   font-weight: 400;
   letter-spacing: 1px;
}

@media (max-width: 1024px) {
   main {
       grid-template-columns: repeat(3, 1fr);
       gap: 25px;
       padding: 30px 15px;
   }
   header h1 {
       font-size: 2em;
   }
}
@media (max-width: 768px) {
   main {
       grid-template-columns: repeat(2, 1fr);
       gap: 20px;
       padding: 25px 15px;
   }
   header h1 {
       font-size: 1.8em;
   }
   .box {
       border-radius: 15px;
   }
}
@media (max-width: 480px) {
   main {
       grid-template-columns: repeat(1, 1fr);
       gap: 20px;
       padding: 20px 10px;
   }
   header {
       padding: 20px;
   }
   header h1 {
       font-size: 1.5em;
       letter-spacing: 1px;
   }
   footer h2 {
       font-size: 1em;
   }
}