@social-mail/social-mail-client 1.8.445 → 1.9.3

package/styler/styles/animations/properties/timing-function.css.js

@@ -1,64 +0,0 @@
-import styled from "postcss-import-styled-js";
-import { splitNames } from "../../../core.js";
-
-const timingFunctions = splitNames(`
-    inherit, initial, revert, revert-layer, unset,
-    linear, ease, ease-in, ease-out, ease-in-out, step-start, step-end
-`);
-
-const animationTimingFunctions = timingFunctions.map((s) => styled.css `
-
-    [styler-on-enter-timing-function=${s}] {
-        --styler-on-enter-timing-function: ${s};
-    }
-
-    [styler-on-enter-effect-1-timing-function=${s}] {
-        --styler-on-enter-effect-1-timing-function: ${s};
-    }
-
-    [styler-on-enter-effect-2-timing-function=${s}] {
-        --styler-on-enter-effect-2-timing-function: ${s};
-    }
-
-    [styler-on-click-timing-function=${s}] {
-        --styler-on-click-timing-function: ${s};
-    }
-
-    [styler-on-click-effect-1-timing-function=${s}] {
-        --styler-on-click-effect-1-timing-function: ${s};
-    }
-
-    [styler-on-click-effect-2-timing-function=${s}] {
-        --styler-on-click-effect-2-timing-function: ${s};
-    }
-
-    [styler-on-hover-timing-function=${s}] {
-        --styler-on-hover-timing-function: ${s};
-    }
-
-    [styler-on-hover-effect-1-timing-function=${s}] {
-        --styler-on-hover-effect-1-timing-function: ${s};
-    }
-
-    [styler-on-hover-effect-2-timing-function=${s}] {
-        --styler-on-hover-effect-2-timing-function: ${s};
-    }
-
-    [styler-on-leave-timing-function=${s}] {
-        --styler-on-leave-timing-function: ${s};
-    }
-
-    [styler-on-leave-effect-1-timing-function=${s}] {
-        --styler-on-leave-effect-1-timing-function: ${s};
-    }
-
-    [styler-on-leave-effect-2-timing-function=${s}] {
-        --styler-on-leave-effect-2-timing-function: ${s};
-    }
-
-`);
-
-
-export default styled.css `
-    ${animationTimingFunctions}
-`;

package/styler/styles/animations/properties/timing-function.css.map

@@ -1 +0,0 @@
-{"version":3,"sources":["timing-function.css.js"],"names":[],"mappings":"AA6D2B;AAAA,IArD6C;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAqD7C"}

package/styler/styles/animations/scroll-animations.css

@@ -1,34 +0,0 @@
-scroll-aware[styler-on-scroll] {
-    position: relative;
-}
-
-scroll-aware[styler-on-scroll] > * {
-    transition: all var(--styler-on-scroll-delay, 0.1s);
-}
-
-scroll-aware[above-body][styler-on-scroll=move-away] {
-    perspective: 1000px;
-}
-
-scroll-aware[above-body][styler-on-scroll=move-away] > *,
-scroll-aware[above-body][styler-on-scroll-effect-2=blur]::after {
-    --translate-y: var(--above-body-height);
-    --translate-z: calc(var(--above-body-height) * -1);
-    transform: translate3d(0px, var(--translate-y), var(--translate-z));
-}
-
-scroll-aware[above-body][styler-on-scroll-effect-1=fade-out] > * {
-    opacity: clamp(0.5, var(--body-ratio), 1);
-}
-
-scroll-aware[above-body][styler-on-scroll-effect-2=blur]::after {
-    display: block;
-    position: absolute;
-    left: 0;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    content: "";
-    pointer-events: none;
-    backdrop-filter: blur(5px);
-}

package/styler/styles/elements/image-link.css

@@ -1,10 +0,0 @@
-[styler-element=image-link] {
-    border: solid 1px transparent;
-    outline: none;
-    text-decoration: none;
-    display: flex;
-    &:hover {
-        border-color: green;
-        text-decoration: underline;
-    }
-}

package/styler/styles/elements/link-button.css

@@ -1,19 +0,0 @@
-[styler-element=link-button] {
-    display: inline-flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    gap: var(--size-default);
-    padding-top: var(--rem0_5);
-    padding-bottom: var(--rem0_5);
-    padding-left: var(--rem2_5);
-    padding-right: var(--rem2_5);
-    background: var(--button-background);
-    color: var(--button-text);
-    border: none;
-    border-radius: var(--size-small);
-    text-decoration: none;
-    &:hover {
-        text-decoration: underline;
-    }
-}

package/styler/styles/elements/link-icon-button.css

@@ -1,18 +0,0 @@
-[styler-element=link-icon-button] {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    gap: var(--size-default);
-    padding-top: var(--rem0_5);
-    padding-bottom: var(--rem0_5);
-    padding-left: var(--rem2_5);
-    padding-right: var(--rem2_5);
-    background: var(--button-background);
-    color: var(--button-text);
-    border: none;
-    border-radius: var(--size-small);
-    text-decoration: none;
-    &:hover {
-        text-decoration: underline;
-    }    
-}

package/styler/styles/elements/pdf-viewer.css

@@ -1,37 +0,0 @@
-body[editing] {
-    & pdf-viewer {
-        display: inline-block;
-        position: relative;
-        overflow: hidden;
-        &::part(thumb) {
-            width: 100%;
-            height: 100%;
-            object-fit: contain;
-        }
-        
-
-        & * {
-            user-select: none;
-            pointer-events: none;
-        }
-
-        &:not([poster]):before {
-            background-color: #ddd;
-            color: #000;
-            font-size: 16px;
-            font-weight: bold;
-            font-family: 'Courier New', Courier, monospace;
-            height: 100%;
-            display: flex;
-            justify-items: center;
-            align-items: center;
-            min-height: 30px;
-            opacity: 0.3;
-            border-radius: 3px;
-            white-space: nowrap;
-            overflow: hidden;
-            text-overflow: ellipsis;
-            content: "PDF View";
-        }
-    }
-}

package/styler/styles/elements/video-player.css

@@ -1,35 +0,0 @@
-body[editing=true] video-player {
-    display: flex;
-    content: "Video Player";
-    align-items: center;
-    justify-content: center;
-    justify-items: center;
-    min-height: 100px;
-    background-color: black;
-    border-radius: 10px;
-    color: white;
-
-    &:before {
-        padding: 10px;
-        background-color: #ddd;
-        color: #000;
-        font-size: 16px;
-        font-weight: bold;
-        font-family: 'Courier New', Courier, monospace;
-        height: 100%;
-        min-height: 100px;
-        display: flex;
-        justify-items: center;
-        align-items: center;
-        opacity: 0.3;
-        border-radius: 3px;
-        white-space: nowrap;
-        overflow: hidden;
-        text-align: center;
-        vertical-align: middle;
-        text-overflow: ellipsis;
-        content: "Video Player";
-
-    }
-
-}

package/styler/styles/layouts/animated-text.css

@@ -1,3 +0,0 @@
-animated-text > * {
-    transform-origin: inherit;
-}

package/styler/styles/layouts/banner.css

@@ -1,13 +0,0 @@
-[styler-layout=banner] {
-    display: flex;
-    flex-direction: column;
-    width: 100vw;
-    align-self: center;
-    align-items: center;
-    justify-content: center;
-    z-index: 20;
-
-    & > * {
-        width: var(--children-width, 100%);
-    }
-}

package/styler/styles/layouts/billboard.css

@@ -1,26 +0,0 @@
-[styler-layout=billboard] {
-    display: grid;
-    grid-template-columns: 1fr auto 1fr;
-    grid-template-rows: 1fr auto 1fr;
-    justify-content: center;
-    align-items: center;
-    justify-items: center;
-    margin: var(--size-default);
-    & > h1 {
-        grid-row: 1 / span 3;
-        grid-column: 1 / span 3;
-        margin-block-start: 0;
-        margin-block-end: 0;
-        font-size: 5rem;
-        -webkit-text-stroke-color: currentColor;
-        -webkit-text-stroke-width: 1px;
-        -webkit-text-fill-color: transparent;
-    }
-    & > h4 {
-        grid-row: 2;
-        grid-column: 2;
-        margin-block-start: 0;
-        margin-block-end: 0;
-        font-size: 2rem;
-    }
-}

package/styler/styles/layouts/box-frame.css

@@ -1,37 +0,0 @@
-[styler-layout=box-frame] {
-    overflow: hidden;
-    resize: none;
-    width: 500px;
-    min-height: 500px;
-    position: relative;
-    max-width: 80vw;
-    & > * {
-        border: none;
-        position: absolute;
-        left: 0;
-        top: 0;
-        width: 100%;
-        height: 100%;
-    }
-}
-
-body[editing] [styler-layout=box-frame] {
-    &:before {
-        background-color: #ddd;
-        color: #000;
-        font-size: 16px;
-        font-weight: bold;
-        font-family: 'Courier New', Courier, monospace;
-        height: 100%;
-        display: flex;
-        justify-items: center;
-        align-items: center;
-        min-height: 30px;
-        opacity: 0.3;
-        border-radius: 3px;
-        white-space: nowrap;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        content: "IFRAME CONTENT";
-    }
-}

package/styler/styles/layouts/card.css

@@ -1,29 +0,0 @@
-[styler-layout=card] {
-    display: grid;
-    margin: var(--size-default);
-    border-radius: var(--size-default);
-    grid-template-columns: 1fr;
-    grid-template-rows: auto 1fr;
-    justify-items: stretch;
-    align-items: stretch;
-    contain: content;
-
-    & > h4 {
-        max-width: 100%;
-        padding: var(--size-default);
-        font-size: var(--rem1_5);
-        grid-column: 1;
-        grid-row: 1;
-        margin-top: 0;
-        margin-bottom: 0;
-    }
-
-    & > section {
-        max-width: 100%;
-        margin: var(--size-default);
-        padding: var(--size-default);
-        border-radius: var(--size-default);
-        grid-column: 1;
-        grid-row: 3;
-    }
-}

package/styler/styles/layouts/check.svg

@@ -1 +0,0 @@
-<?xml version="1.0"?><svg xmlns="http://www.w3.org/2000/svg" width="600" height="600"><path d="m7.7,404.6c0,0 115.2,129.7 138.2,182.68l99,0c41.5-126.7 202.7-429.1 340.92-535.1c28.6-36.8-43.3-52-101.35-27.62-87.5,36.7-252.5,317.2-283.3,384.64-43.7,11.5-89.8-73.7-89.84-73.7z" fill="#6c4"/></svg>

package/styler/styles/layouts/column-2.css

@@ -1,22 +0,0 @@
-[styler-layout=columns-2] {
-    display: flex;
-    flex-wrap: nowrap;
-    flex-direction: row;
-    gap: var(--size-default);
-    border-radius: var(--size-default);
-    flex-direction: row;
-    align-items: center;
-    justify-content: space-around;
-    overflow: hidden;
-
-    @media (max-width: 700px) {
-        & {
-            flex-direction: column;
-            width: 100%;
-            max-width: 100%;        
-            justify-items: center;
-            align-items: center;
-            justify-content: center;
-        }
-    }
-}

package/styler/styles/layouts/column-3.css

@@ -1,32 +0,0 @@
-[styler-layout=columns-3] {
-    display: grid;
-    gap: var(--size-default);
-    border-radius: var(--size-default);
-    align-items: stretch;
-    grid-template-columns: 1fr 1fr 1fr;
-    overflow: hidden;
-
-    & > :not([styler-justify]) {
-        justify-self: center;
-    }
-
-    & > :first-child:not([styler-justify-self]) {
-        justify-self: start;
-    }
-
-    & > :last-child:not([styler-justify-self]) {
-        justify-self: end;
-    }
-
-    @media (max-width: 700px) {
-        & {
-            display: flex;
-            flex-direction: column;
-            width: 100%;
-            max-width: 100%;        
-            justify-items: center;
-            align-items: center;
-            justify-content: center;
-        }
-    }
-}

package/styler/styles/layouts/column.css

@@ -1,10 +0,0 @@
-[styler-layout=column] {
-    display: flex;
-    flex-direction: column;
-    gap: var(--size-default);
-    padding: var(--size-default);
-    border-radius: var(--size-default);
-    justify-items: center;
-    align-items: stretch;
-    overflow: hidden;
-}

package/styler/styles/layouts/component.css

@@ -1,26 +0,0 @@
-[styler-layout=component] {
-    display: block;
-
-    &:not([data-ready]):before {
-        background-color: #ddd;
-        color: #000;
-        font-size: 16px;
-        font-weight: bold;
-        font-family: 'Courier New', Courier, monospace;
-        height: 20px;
-        display: flex;
-        justify-items: center;
-        align-items: center;
-        min-height: 30px;
-        opacity: 0.3;
-        border-radius: 3px;
-        white-space: nowrap;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        margin: var(--size-default);
-        padding: var(--size-default);
-        border-radius: var(--size-default);
-        content: "Loading Component ...";
-
-    }
-}

package/styler/styles/layouts/floating-nav-bar.css

@@ -1,86 +0,0 @@
-[styler-layout=floating-nav-bar] {
-    display: flex;
-    padding: var(--size-small);
-    padding-left: var(--size-large);
-    padding-right: var(--size-large);
-    margin: var(--size-default);
-    position: sticky;
-    top: var(--size-default);
-    border-radius: var(--size-large);
-    border: solid 1px var(--border-color);
-    background: var(--nav-bar-background);
-    backdrop-filter: var(--nav-bar-back-drop-filter);
-    align-items: center;
-    justify-content: space-between;
-    z-index: 20;
-    & > h1, & > h2, & > h3, & > h5, & > h6 {
-        margin-block-start: 0;
-        margin-block-end: 0;
-        & a {
-            text-decoration: none;
-            color: var(--default-text-color);
-            &:hover {
-                color: var(--accent-color);
-            }
-        }
-    }
-    & > [styler-element=navbar] {
-        display: flex;
-        gap: 5px;
-        position: relative;
-        & > input[type=checkbox][styler-element=drawer] {
-            color: transparent;
-            display: none;
-        }
-        & > nav {
-            display: flex;
-            gap: var(--size-default);
-            flex-wrap: wrap;
-        }
-    }
-
-    @media (max-width: 500px) {
-        & > [styler-element=navbar] {
-
-            & > nav {
-                display: none;
-            }
-
-            & > input[type=checkbox][styler-element=drawer] {
-                display: inline-block;
-                background-color: white;
-                background-image: data-uri("./svgs/bars.svg");
-                background-position: 2px 2px;
-                border-radius: 2px;
-                background-repeat: no-repeat;
-                border-width: 1px;
-                border-style: solid;
-                border-color: transparent;
-                width: 21px;
-                height: 22px;
-                appearance: none;
-                outline: none;
-                &:checked {
-                    background-image: data-uri("./svgs/cross.svg");
-                }
-
-                &:checked ~ nav {
-                    display: flex;
-                    gap: var(--size-default);
-                    flex-direction: column;
-                    position: absolute;
-                    right: 10px;
-                    top: 40px;
-                    background: var(--primary-surface);
-                    color: var(--primary-text-color);
-                    padding: var(--size-default);
-                    border-radius: var(--size-default);
-                    box-shadow: 0 0 8px 2px gray;
-                    min-width: 200px;
-                    min-height: 300px;                    
-                }
-            }
-        }
-        
-    }
-}

package/styler/styles/layouts/grid.css

@@ -1,9 +0,0 @@
-[styler-layout=grid] {
-    display: grid;
-    gap: var(--size-default);
-    padding: var(--size-default);
-    border-radius: var(--size-default);
-    justify-items: center;
-    align-items: stretch;
-    overflow: hidden;
-}

package/styler/styles/layouts/grid1x1.css

@@ -1,19 +0,0 @@
-[styler-layout=grid-1x1] {
-    display: grid;
-    gap: var(--size-default);
-    padding: var(--size-default);
-    border-radius: var(--size-default);
-    align-items: center;
-    justify-content: center;
-    justify-items: stretch;
-    grid-template-columns: 1fr;
-    grid-template-rows: 1fr;
-    max-width: 100%;
-
-    & > * {
-        grid-row: 1;
-        grid-column: 1;
-        max-width: 100%;
-        max-height: 100%;
-    }
-}

package/styler/styles/layouts/image-box.css

@@ -1,44 +0,0 @@
-[styler-layout=image-box] {
-    display: flex;
-    flex-direction: row;
-    gap: var(--size-default);
-    padding: var(--size-default);
-    margin: var(--size-default);
-    border-radius: var(--size-default);
-    justify-items: center;
-    align-items: stretch;
-    contain: content;
-    position: relative;
-
-    & > img {
-        align-self: stretch;
-    }
-
-    & > section {
-        & > h4[styler-element=accent] {
-            padding: var(--size-large);
-        }
-    }
-    & > * {
-        padding: var(--size-default);
-        flex: 1 1 50%;
-        max-width: 50%;
-    }
-
-
-    @media (max-width: 700px) { 
-        & {
-            flex-direction: column;
-        }
-
-        & > img {
-            align-self: stretch;
-        }
-
-        & > * {
-            padding: var(--size-default);
-            flex: 1 1 100%;
-            max-width: 100%;
-        }
-    }
-}

package/styler/styles/layouts/image-card.css

@@ -1,61 +0,0 @@
-[styler-layout=image-card] {
-    display: grid;
-    margin: var(--size-default);
-    border-radius: var(--size-default);
-    grid-template-columns: 1fr;
-    grid-template-rows: auto 1fr 1fr;
-    justify-items: stretch;
-    align-items: stretch;
-    contain: content;
-
-    & > h4 {
-        max-width: 100%;
-        padding: var(--size-default);
-        grid-column: 1;
-        grid-row: 1;
-        margin-top: 0;
-        margin-bottom: 0;
-    }
-
-    & > img {
-        padding: var(--size-default);
-        margin: var(--size-default);
-        align-self: center;
-        max-width: 100%;
-        grid-column: 1;
-        grid-row: 2;
-    }
-    & > section {
-        max-width: 100%;
-        margin: var(--size-default);
-        padding: var(--size-default);
-        border-radius: var(--size-default);
-        grid-column: 1;
-        grid-row: 3;
-    }
-
-    @media (min-width: 600px) { 
-        & {
-            grid-template-columns: 1fr 1fr;
-            grid-template-rows: auto 1fr;
-        }
-
-        & > h4 {
-            max-width: 100%;
-            grid-column: 1 / span 2;
-            grid-row: 1;
-        }
-
-        & > img {
-            padding: var(--size-default);
-            max-width: 100%;
-            grid-column: 1;
-            grid-row: 2;
-        }
-        & > section {
-            max-width: 100%;
-            grid-column: 2;
-            grid-row: 2;
-        }
-    }
-}