#portal article { max-width: unset }
#portal h2 { margin-top: 31px; }
main section { background-color: #fff; box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.04), 0px 2px 4px rgba(0, 0, 0, 0.02); border-radius: 12px; padding: 0; }

#games a:last-child { 
	color: #fff; 
	background:  linear-gradient(285.33deg, rgba(255, 255, 255, 0.5) 7.95%, rgb(0 0 0 / 50%) 100%), #EB8E01; 				  
	background-blend-mode: soft-light, normal;  
}
					  
 

#game-top { display: grid; grid-gap: 16px; grid-template-columns: 1fr; margin-top: 20px; }
#game-top section {background-repeat: no-repeat;background-position: 24px center;}

#game-top h3 a::after { content: url(/images/open.svg); margin-left: 16px; }
#game-top h3 a { margin: 16px 24px 0 20px; font-weight: bold; font-size: 16px; color: #3A3A3A; }

#game-top li {
    margin-block-end: 2px;
    display: grid;
    grid-template-columns: 12px 1fr auto;
    counter-increment: step-counter;
    padding-inline: 12px;
    max-width: 300px;
    margin-inline: auto;
}

#game-top li::before {
                content: counter(step-counter) '.';
            }

#game-top li a {
                display: grid;
                padding-inline-start: 36px;
                width: calc(100% - 150px);
                white-space: nowrap;
                }
                            li img {
                position: absolute;
                margin-inline: 22px;
                margin-block-start: 6px;
            }

#results { margin: 16px 0px; display: grid; grid-gap: 16px; grid-template-columns: 1fr;  align-content: start;}
#results section {padding: 10px;background-repeat: no-repeat;background-position: 24px center;}
#results h3 { margin: 16px 10px 0 90px; font-weight: bold; font-size: 16px; color: #3A3A3A; }
#results p { margin: 4px 5px 16px 90px;}
#results a::after { content: url(/images/open.svg); margin-left: 10px; }

#results section:nth-child(1) { background-image: url(/images/analyze.svg) }

@media screen and (min-width: 600px) {
	#results { grid-template-columns: 1fr 1fr; }
	#game-top { grid-template-columns: 1fr 1fr; }
}

@media screen and (min-width: 900px) {
	main {display: grid; grid-template-areas: 'portal results'; grid-template-columns: auto 286px; column-gap: 3.5vw;}
	#results {grid-template-columns: 1fr;}
}

@media screen and (min-width: 1680px) {
	#game-top { grid-template-columns: 1fr 1fr 1fr 1fr; }	
}