section[role='narrative']{background-position:50% 50%;background-size:cover} section[role='narrative'] .text, section[role='narrative'] .main-image{flex:1} section[role='narrative'] .main-image img{min-width:16rem} section[role='narrative'][data-back]{height:25vw;min-height:32rem;background-position:50% 50%} section[role='narrative'][data-back] *{color:#000} section[role='narrative'][data-back] .text{max-width:32rem;background:rgba(255,255,255,0.8);transition:all .25s ease-out;-webkit-transition:all .25s ease-out} section[role='narrative'][data-back] .text:hover{background:rgba(255,255,255,0.9)} @media (max-width:320px){section[role='narrative'] .flex{flex-flow:column} section[role='narrative'] .text, section[role='narrative'] .main-image{width:100%}}#images{background-color:unset} #intro{height:25vh;min-height:20rem;max-height:40rem} #mainImage{max-width:100%;min-width:20rem;min-height:20rem} @media (max-width:800px){.col{width:100%} #overviewMedia{order:1} #overviewTexts{order:2} #overview .summary{width:100%;text-align:center} #mainImage{min-width:16rem;min-height:16rem}}