.content { margin: -60px auto 0 auto; padding: 0 var(--space-small); max-width: 1100px; } @media (max-width: 768px) { .content { margin-top: 0; } } /* Sections */ .section { margin-bottom: var(--space-xlarge); display: flex; flex-direction: column; } .section--title { display: flex; flex-direction: column; align-items: center; } .section--title::before { width: 150px; height: 150px; background: center / contain no-repeat var(--image); content: ""; } .section--title:hover::before { background-image: var(--hover-image); } .section--content { display: flex; flex-direction: column; align-items: center; } @media (max-width: 768px) { .section { margin-bottom: var(--space-large); } .section--title { flex-direction: row; } .section--title::before { width: 50px; height: 50px; margin-right: var(--space-small); } .section--content { grid-area: 2 / 1 / 3 / 4; } } /* Members area */ .members { display: flex; justify-content: center; gap: var(--space-medium); } .member { display: flex; flex-direction: column; align-items: center; } @media (max-width: 768px) { .members { flex-direction: column; } } /* Games */ .game { display: flex; flex-direction: column; } .game::after { content: ""; background: center / cover no-repeat url("/img/game-footer.png"); height: 13px; } .game--picture-wrapper { display: flex; justify-content: center; overflow: hidden; } .game--description { padding: var(--space-large); display: flex; flex-direction: column; align-items: center; background: var(--primary-color); color: var(--dark); } .game--more-button { background: var(--dark); color: var(--primary-color); padding: var(--space-small) var(--space-medium); text-decoration: none; font-family: Knewave; font-size: var(--fz-4); } .game--more-button:hover { color: white; } /* News */ .news { display: flex; flex-direction: column; margin-bottom: var(--space-medium); } .news::after { content: ""; background: center / cover no-repeat url("/img/game-footer.png"); height: 13px; } .news--title { display: grid; grid-template-columns: 1fr auto; background: var(--dark); color: white; padding: var(--space-small) var(--space-medium); } .news--content { padding: var(--space-large); display: flex; flex-direction: column; align-items: center; background: var(--primary-color); color: var(--dark); } @media (max-width: 768px) { .news--title { grid-template-columns: auto; grid-template-rows: auto auto; } }