#games-page { .game-articles { article { display: grid; grid-template-columns: 0.7fr 1fr; gap: 0 20px; margin: 20px; &.game-article { grid-template-rows: repeat(6, auto); background-color: $dark_2; *:not(a) { color: $light_0; } .game-title { grid-column: 1 / span 2; background-color: $light_0; margin: 0; padding: 30px 20px; color: $medium_grey; font-size: 35px; font-style: italic; } .game-tags { grid-column: 1; display: flex; gap: 10px; flex-wrap: wrap; margin: 10px 20px; span { font-size: 12px; padding: 6px; background-color: $medium_grey; color: $light_0; border-radius: 5px; font-weight: 600; } } .game-subtitle { grid-column: 1; margin: 10px 20px 30px; } .game-description { grid-column: 1; text-align: justify; margin: 10px 20px 30px; } .image-carousel { grid-column: 2; grid-row: 2 / span 4; height: 100%; } .game-team { grid-column: 1 / span 2; h2 { background-color: $light_1; color: $dark_2; padding: 10px 20px; font-style: italic; font-size: 20px; margin: 0; } .team-members { display: flex; flex-direction: column; gap: 30px; .team-member { display: grid; grid-template-columns: 150px 1fr; grid-template-rows: auto auto 1fr; .team-member-img { grid-row: 1 / span 3; overflow: hidden; img { image-rendering: crisp-edges; image-rendering: -moz-crisp-edges; image-rendering: pixelated; width: 100%; } } .team-member-title { margin: 10px 10px 5px; } .team-member-subtitle { margin: 0 10px; font-size: 14px; color: $light_1; font-style: italic; } .team-member-body { margin: 20px 10px 20px 30px; text-align: justify; } } } } } &.placeholder { * { background-color: $light_0; } height: 400px; } @media screen and (max-width: $screen_l) { grid-template-columns: 1fr; &.game-article { grid-template-rows: repeat(5, auto); .game-title { grid-column: 1; padding: 20px; font-size: 25px; } .image-carousel { grid-column: 1; grid-row: 2; height: 400px; } .game-team { grid-column: 1; .team-members { .team-member { grid-template-columns: 70px 1fr; .team-member-img { grid-row: 1 / span 2; margin: 10px; } .team-member-body { grid-column: 1 / span 2; } } } } } } } } }