108 lines
2.1 KiB
Plaintext
108 lines
2.1 KiB
Plaintext
---
|
|
import { Picture } from "astro:assets";
|
|
|
|
interface Props {
|
|
title: string;
|
|
image: {
|
|
src: ImageMetadata;
|
|
alt: string;
|
|
};
|
|
items: Array<string>;
|
|
}
|
|
|
|
const { title, image, items } = Astro.props;
|
|
---
|
|
|
|
<div class="card">
|
|
<Picture class="image" src={image.src} alt={image.alt} />
|
|
|
|
<h3 class="heading-gradient">{title}</h3>
|
|
|
|
{
|
|
!!items.length ? (
|
|
<ul class="list">
|
|
{items.map((item) => (
|
|
<li class="item">{item}</li>
|
|
))}
|
|
</ul>
|
|
) : null
|
|
}
|
|
</div>
|
|
|
|
<style>
|
|
.card {
|
|
display: grid;
|
|
grid-template-rows: auto 1fr auto;
|
|
max-height: 24rem;
|
|
|
|
& > * {
|
|
grid-column: 1;
|
|
}
|
|
|
|
@media screen and (min-width: 64rem) {
|
|
min-height: 36rem;
|
|
}
|
|
}
|
|
|
|
@media (prefers-reduced-motion: no-preference) and (hover: hover) {
|
|
.card:hover {
|
|
& picture:after {
|
|
backdrop-filter: blur(12px);
|
|
}
|
|
}
|
|
}
|
|
|
|
picture {
|
|
display: block;
|
|
grid-row: 1 / -1;
|
|
position: relative;
|
|
z-index: -1;
|
|
}
|
|
|
|
picture::after {
|
|
content: "";
|
|
display: block;
|
|
width: 100%;
|
|
height: 100%;
|
|
background: var(--gradient-overlay);
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
z-index: 1;
|
|
transition: all;
|
|
transition-duration: 300ms;
|
|
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
|
}
|
|
|
|
.image {
|
|
display: block;
|
|
width: 100%;
|
|
max-width: 100%;
|
|
height: 100%;
|
|
object-fit: cover;
|
|
}
|
|
|
|
h3 {
|
|
grid-row: 1;
|
|
font-size: 2.25rem;
|
|
line-height: var(--leading-title);
|
|
padding-block: 2.5rem 1rem;
|
|
padding-inline: 2.5rem;
|
|
max-width: 10ch;
|
|
}
|
|
|
|
ul {
|
|
display: grid;
|
|
gap: 1.25rem;
|
|
grid-row: 3;
|
|
list-style: none;
|
|
padding: 2.5rem;
|
|
}
|
|
|
|
li {
|
|
max-width: 26ch;
|
|
font-size: 1.125rem;
|
|
line-height: 1;
|
|
}
|
|
</style>
|