<a href="#" class="image-list-teaser">
<h3 class="image-list-teaser__title image-list-teaser__title--01">
Vertigo in the Face of the Infinite
</h3>
<p class="image-list-teaser__subtitle">Matthew Plummer-Fernandez</p>
<figure>
<img class="content__image__big" src="../../assets/bg-images/edition-01/visual-header-heads.jpg" alt="Tower" />
<figcaption>Erste INNOQ-Medienkunst-Edition</figcaption>
</figure>
</a>
<a href="#" class="image-list-teaser">
<h3 class="image-list-teaser__title image-list-teaser__title--01">Vertigo in the Face of the Infinite</h3>
<p class="image-list-teaser__subtitle">Matthew Plummer-Fernandez</p>
<figure>
<img class="content__image__big" src={context.app.uri("assets/bg-images/edition-01/visual-header-heads.jpg")} alt="Tower" />
<figcaption>
Erste INNOQ-Medienkunst-Edition
</figcaption>
</figure>
</a>
/* No context defined. */
.image-list-teaser {
@extend %link-unstyled;
display: block;
margin-bottom: $spacer-xxl;
}
.image-list-teaser__title {
@extend %heading-font-heavy;
margin-bottom: 0;
text-align: center;
font-size: $font-size-lg;
&--01 {
color: $brand-red;
}
&--02 {
color: $brand-apricot;
}
}
.image-list-teaser__subtitle {
@extend %body-font-italic;
text-align: center;
font-size: $font-size-base;
}
@media screen and (min-width: $grid-breakpoint-md) {
.image-list-teaser__title {
font-size: $font-size-xxl;
}
.image-list-teaser__subtitle {
font-size: $font-size-sm;
}
}
No notes defined.