.block-pages
.top
a
text-decoration: none
.grid, .cards, .list
article
position: relative
display: flex
flex-direction: column
.media
@include handle-svg-fit
order: -1
margin-bottom: $spacing1
&:empty
display: none
img
display: block
aspect-ratio: 16/9
object-fit: cover
width: 100%
.page-title
@include h3
a
@include stretched-link(before)
text-decoration: none
+ p
margin-top: $spacing0
@include media-breakpoint-up(desktop)
.top
margin-bottom: $spacing2
@include media-breakpoint-down(desktop)
.top
.block-title
@include h5
.description
@include h2
article
margin-top: $spacing1
@include in-page-without-sidebar
.top
a
@include icon(arrow, after, true)
@include hover-translate-icon
.description
@include h2
&--grid
.top
@include top-flex
.grid
a
@include icon(arrow, after, true)
@include hover-translate-icon(after)
@include media-breakpoint-up(desktop)
.grid
@include grid(2, desktop)
@include in-page-with-sidebar
grid-column-gap: half($grid-gutter) !important
@include in-page-without-sidebar
@include grid(3, desktop)
&--cards
background-color: $block-pages-card-background
padding-bottom: $grid-gutter
padding-top: $grid-gutter
*:not(.heading) + &
margin-top: 0
.blocks &:last-of-type
margin-bottom: 0
.top
@include top-flex
.cards
@include grid(2, desktop)
@include in-page-with-sidebar
grid-gap: half($grid-gutter) !important
@include in-page-without-sidebar
@include grid(3, desktop)
// TODO: move this //
.block-gallery + &,
.block-pages--cards + &
margin-top: 0
// ----------------- //
.card
padding: $spacing1
background-color: $block-pages-card-page-background
transition: background 0.3s, color 0.3s
display: flex
flex: auto
flex-direction: column
min-height: 320px
&,
a
color: $block-pages-card-page-color
.media
margin-bottom: 0
margin-left: -$spacing1
margin-right: -$spacing1
margin-top: -$spacing1
img
min-width: 100%
.more
@include arrow-right-hover
@include icon-block(arrow-right, after)
@include link($block-pages-card-page-color)
@include text-underline
position: relative
margin-top: auto
padding-top: $spacing1
display: flex
justify-content: space-between
align-items: center
&:hover
.more:after
opacity: 1
transform: translateX(0)
a,
.more
transition: text-decoration-color .3s ease, color .3s ease
&:hover
background-color: $block-pages-card-page-background-hover
&, a, .more
color: $block-pages-card-page-color-hover
.more
text-decoration-color: $block-pages-card-page-color-hover
&--list
ul
@include list-reset
li
display: block
+ li
margin-top: $spacing0
> a
@include icon(arrow, before, true)
padding-right: $spacing0
@include hover-translate-icon(before, 5)
@include link
text-decoration-color: rgba(0,0,0,0)
article
.page-title
@include h3
a
@include icon(arrow, after, true)
@include hover-translate-icon(after)
text-decoration-color: transparent
@include media-breakpoint-down(desktop)
.top
margin-bottom: $spacing0
ul
margin-top: $spacing1
@include media-breakpoint-up(desktop)
ul:not(.title-only)
li + li
margin-top: $grid-gutter
article
gap: $grid-gutter
flex-direction: row
.media
flex-shrink: 0
margin-bottom: 0
@include in-page-with-sidebar
.block-content
.top
margin-bottom: $spacing1
// .description
// margin-bottom: $spacing2
ul.title-only
@include grid(2, desktop)
grid-row-gap: $spacing0 !important
grid-column-gap: half($grid-gutter) !important
li
margin-top: 0
a
@include meta
article
gap: half($grid-gutter)
.media
width: calc(#{col(2, 8)} + #{half($grid-gutter)})
.page-content
width: col(6, 8)
@include in-page-without-sidebar
.block-title
a
@include stretched-link(before)
.top
.description
p
@include h2
article
.media
width: col(4)
.page-content
width: col(8)
&:not(.with-description)
ul.title-only
@include grid(4, desktop, space(2))
grid-column: 1 / 13
li
margin-top: 0
ul:not(.title-only)
@include grid(2, desktop)
li + li
margin-top: 0
&.with-description
.block-content
@include grid(12, desktop, $spacing2)
row-gap: half($grid-gutter)
.top
align-items: initial
grid-column: 1 / 8
margin-bottom: 0
display: grid
grid-template-rows: subgrid
grid-row: span 2
.block-title
width: auto
.description
@include body-text
margin-top: 0
// If page description
.top + ul
grid-column: 9 / 13
grid-row: 2
display: block
li + li
margin-top: $spacing0
article
margin-top: $spacing3
&.with-images
.top
grid-column: 1 / 7
.top + ul
grid-column: 7 / 13
&--alternate
.top
@include top-flex
.grid
article .media img
aspect-ratio: unset
@include media-breakpoint-up(desktop)
article
width: col(4, 8)
&:not(:first-child)
margin-top: -5%
&:nth-child(even)
margin-left: auto
&.image-portrait
+ .image-portrait
margin-top: -30%
+ .image-square,
+ .image-landscape
margin-top: -15%
@include in-page-without-sidebar
.top
.description
@include body-text
.grid
width: col(10)
margin-left: auto
margin-right: auto
article
width: col(4, 10)
&--large
.top
@include top-flex
.page
position: relative
+ .page
margin-top: $spacing3
.more
@include icon(arrow, after, true)
@include hover-translate-icon(after)
&:hover .more:after
transform: translateX(#{px2rem(10)})
&-title a
@include stretched-link
.media
img
aspect-ratio: 1
@include media-breakpoint-up(desktop)
.page
flex-direction: row
gap: $grid-gutter
@include in-page-with-sidebar
.page
&-title
@include h2
margin-bottom: space(4)
&-content
flex: 1
.media
flex: 1
@include in-page-without-sidebar
.top
.description
@include body-text
.page
align-items: center
&-title
@include lead
margin-bottom: space(4)
&-content
width: col(5)
.media
width: col(6)