add Card component

src/components/Card/index.tsx

@@ -0,0 +1,36 @@
+import './styles.css'
+import cx from 'classnames'
+import Link from 'next/link'
+
+export type CardLayout = 'simple' | 'featured'
+export type CardProps = {
+    style?: React.CSSProperties
+    href: string
+    img: {
+        alt: string
+        src: string
+        srcSet: string
+    }
+    layout: CardLayout
+}
+
+export const Card: React.FC<CardProps> = props => (
+    <div className={cx('card', props.layout)} style={props.style}>
+        <Link href={props.href}>
+            <a>
+                <div className={'card-image'}>
+                    <img
+                        className={cx({ opa: false })}
+                        alt={props.img.alt}
+                        src={props.img.src}
+                        srcSet={props.img.srcSet}
+                    />
+                </div>
+
+                <div className={'card-body'}>
+                    {props.children}
+                </div>
+            </a>
+        </Link>
+    </div>
+)

src/components/Card/styles.css

@@ -0,0 +1,85 @@
+.card {
+    border-radius: var(--radius);
+    box-shadow: var(--shadow);
+    overflow: hidden;
+    transition: box-shadow 150ms;
+}
+
+.card:hover {
+    box-shadow: var(--shadow-active);
+}
+
+.card:hover img {
+    width: 104%;
+    height: 104%;
+
+    top: -2%;
+    left: -2%;
+}
+
+.card > a {
+    display: block;
+    height: 100%;
+    position: relative;
+}
+
+.card-image {
+    position: relative;
+    width: 100%;
+    height: 100%;
+}
+
+.card-image img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+
+    transition: all 150ms ease-out;
+
+    position: absolute;
+    top: 0;
+    left: 0;
+}
+
+.card-body {
+    background-color: var(--color-back-main);
+    padding: var(--size-m);
+}
+
+/* SIMPLE */
+
+.card.simple .card-body {
+    position: relative;
+    padding-top: 0; 
+}
+
+.card.simple .card-body:before {
+    position: absolute;
+    content: '';
+    background-color: var(--color-back-main);
+
+    border-radius: var(--radius) var(--radius) 0 0;
+    width: 100%;
+    height: var(--radius);
+    top: calc(var(--radius) * -1);
+    left: 0;
+}
+
+.card.simple > a {
+    display: flex;
+    flex-direction: column;
+}
+
+/* FEATURED */
+
+.card.featured .card-body {
+    position: absolute;
+
+    --offset: var(--size-m);
+    --r: var(--size-s);
+    left: var(--offset);
+    right: var(--offset);
+    bottom: var(--offset);
+
+    border-radius: var(--radius) var(--radius) var(--r) var(--r);
+}

src/components/CardGrid/styles.css

@@ -3,7 +3,7 @@
     display: grid;
     /* grid-template-columns: 1fr 1fr 1fr; */
     grid-template-columns: repeat(auto-fill, minmax(var(--min-cell-size), 1fr));
-    grid-auto-rows: 1fr;
+    grid-auto-rows: 20em;
     grid-gap: var(--size-xl) var(--size-l);
 }