@import core.variables
$event-cover-image-aspect: 0.5625
$event-cover-image-whitespace: calc((2 * #{$space-2}) + (#{$space-5}))

.event-cover-image
  width: 100vw
  min-height: calc(100vw * #{$event-cover-image-aspect})
  +mq('xs')
    width: 60vw
    min-height: calc(60vw * #{$event-cover-image-aspect})
  +mq('sm')
    // subtract out 5rem of padding around outer page edge and 2 rem of padding
    //both on left and right of cover image (see: event-cover-image-whitespace)
    // |space-5||space-2||event-cover-image||space-2||50vw|
    width: calc(50vw - #{$event-cover-image-whitespace})
    min-height: calc((50vw - #{$event-cover-image-whitespace}) * #{$event-cover-image-aspect})
