@layer addon { .templateMedia { .media { height: 100%; img { height: 100%; } } @media (min-width: 56em) { .inner { padding: calc(var(--section) / 2) 0; } } @media (--min-fablet) { .inner { padding: calc(var(--section) / 2) 0; } } @media (max-width: 56em) { .container { row-gap: var(--section); } } @media (--max-fablet) { .container { row-gap: var(--section); } } &.mediaLeft { @media (min-width: 56em) { .media { grid-column: span 5; } .inner { grid-column: 7 / span 6; } &.portrait { .media { grid-column: 2 / span 3; } } } @media (--min-fablet) { .media { grid-column: span 5; } .inner { grid-column: 7 / span 6; } &.portrait { .media { grid-column: 2 / span 3; } } } } &.mediaRight { @media (min-width: 56em) { .media { grid-column: 8 / span 5; } .inner { grid-column: span 6; } &.portrait { .media { grid-column: 9 / span 3; } } } @media (--min-fablet) { .media { grid-column: 8 / span 5; } .inner { grid-column: span 6; } &.portrait { .media { grid-column: 9 / span 3; } } } } &.video { .media { height: auto; aspect-ratio: 16 / 9; } } &.portrait { .media { aspect-ratio: 9 / 16; video, img { height: 100%; aspect-ratio: 9 / 16; } } } &.playing { .media { &:before {display: none;} &:hover { @media (hover: hover) { .playButton { opacity: 1; } } } } } } }