Newer
Older
&--grid,
&--large
.event
display: flex
flex-direction: column
position: relative
&-content
a
@include stretched-link
&-dates
@extend .meta
margin-top: $spacing0
@include media-breakpoint-down(md)
font-size: $h4-size
line-height: $h4-line-height
font-weight: $h4-weight
.media
order: -1
img
aspect-ratio: 1
object-fit: cover
margin-bottom: half($spacing0)
@include grid(2, md)
.event
@include media-breakpoint-down(desktop)
+ .event
margin-top: $spacing1
&-dates
text-align: right
&-content
h2
@extend .h3
&-description
margin-top: $spacing0
&--large
.event
flex-direction: row
grid-gap: $grid-gutter
&-content
flex: 1
.more
@include icon("arrow-right", after)
margin-top: $spacing1
&::after
margin-left: half($spacing0)
@include media-breakpoint-up(desktop)
&-dates
font-size: $h3-size-desktop
line-height: $h3-line-height
font-weight: $h3-weight
margin-bottom: $spacing2
&-content h2
font-size: $h2-size-desktop
line-height: $h2-line-height
font-weight: $h2-weight
@include media-breakpoint-down(desktop)
flex-direction: column
grid-gap: 0
.media
margin-left: calc(-#{$grid-gutter-sm} /2)
margin-right: calc(-#{$grid-gutter-sm} /2)
aspect-ratio: 1