@layer master { .templateMedia { .container { align-items: center; .media { height: fit-content; img { height: auto; } } } &.mediaLeft { @media (min-width: 56em) { .media { grid-column: span 4; } .inner { grid-column: 6 / span 7; align-self: center; } } @media (--min-fablet) { .media { grid-column: span 4; } .inner { grid-column: 6 / span 7; align-self: center; } } } &.mediaRight { @media (min-width: 56em) { .media { grid-column: 9 / span 4; order: 2; } .inner { grid-column: span 7; order: 1; } } @media (--min-fablet) { .media { grid-column: 9 / span 4; order: 2; } .inner { grid-column: span 7; order: 1; } } } &.mediaBottom { @media (min-width: 56em) { .inner { grid-column: 3 / span 8; } .media { grid-column: 3 / span 8; } } @media (--min-fablet) { .inner { grid-column: 3 / span 8; } .media { grid-column: 3 / span 8; } } } } }