section {
    &:first-of-type {
        margin-top: 170px;
    }

    h1 {
        text-align: center;
        font-size: 3rem;
    }

    p.subtitle {
        text-align: center;
    }

    &.rules-of-play {
        div.rules {
            display: flex;
            flex-direction: column;
            gap: 22px;
            max-width: 800px;
            margin: 0 auto;

            article {
                display: flex;
                align-items: stretch;
                margin-top: 44px;
                filter: drop-shadow(0px 0px 4px rgba(0, 0, 0, 0.25));
        
                @media (max-width: 800px) {
                    --decoratorPosition: bottom;
                    flex-direction: column;
                    max-width: 200px;
                    margin-left: auto;
                    margin-right: auto;
                }
        
                div.content {
                    width: 100%;
                    background-color: white;
                    padding: 22px;
        
                    h3 {
                        font-size: 2rem;
                    }
        
                    p:not(:first-of-type) {
                        margin-top: 22px;
                    }
                }
        
                div.decorated {
                    display: flex;
                    align-items: stretch;
                    flex-shrink: 0;
                    height: 200px;
                    width: 200px;
        
                    img {
                        aspect-ratio: 1/1;
                        object-fit: cover;
                        object-position: center center;
                    }
                }
            }
        }
    }
}