body, html { margin: 0; padding: 0; width: 100%; height: 100%; font-family: 'Roboto Slab', sans-serif; overflow-x: hidden; background: linear-gradient(135deg, #8B0000, #2E8B57); color: #fff; line-height: 1.6; }
.container { max-width: 1440px; margin: auto; padding: 20px; display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; }
.header { grid-column: 1 / -1; text-align: center; padding: 20px; background: rgba(0, 0, 0, 0.5); border-radius: 10px; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); }
.header h1 { font-size: 2.5em; color: #FFD700; text-transform: uppercase; letter-spacing: 2px; }
.header p { font-size: 1.2em; color: #ADFF2F; }
.grid-item { background: rgba(0, 0, 0, 0.7); border-radius: 10px; padding: 20px; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); transition: transform 0.3s ease-in-out; }
.grid-item:hover { transform: scale(1.05); }
.grid-item img { width: 100%; height: auto; border-radius: 10px; }
.grid-item h2 { font-size: 1.5em; color: #FF69B4; margin-bottom: 10px; }
.grid-item p { font-size: 1em; color: #fff; }
.button { display: inline-block; padding: 10px 20px; background: #CD5C5C; color: #fff; text-decoration: none; border-radius: 5px; transition: all 0.3s ease-in-out; }
.button:hover { background: #FF6347; transform: scale(1.1); }
@media (max-width: 768px) { .container { grid-template-columns: 1fr; } .header h1 { font-size: 2em; } }
@media (min-width: 769px) and (max-width: 1024px) { .container { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1025px) and (max-width: 1200px) { .container { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1201px) { .container { grid-template-columns: repeat(4, 1fr); } }