```css
/* =========================================================
   MARY ON THE CROSS
   Wolvden CSS Library
   ========================================================= */


/* =========================================================
   COLOUR PALETTE
   ========================================================= */

:root {

    --background: #171219;
    --background-dark: #100b10;

    --panel: #251923;
    --panel-light: #33212c;
    --panel-lighter: #3d2834;

    --wine: #72243a;
    --crimson: #a63852;
    --bright-red: #bd4d68;

    --pink: #d98299;
    --light-pink: #edb4c3;

    --purple: #765477;
    --light-purple: #a47ca1;

    --text: #eadde2;
    --text-soft: #d4bec7;
    --muted: #c3aeb7;

    --border: #704052;
    --border-light: #8a5265;

}


/* =========================================================
   GENERAL
   ========================================================= */

* {
    box-sizing: border-box;
}


html {
    scroll-behavior: smooth;
}


body {

    margin: 0;

    min-height: 100vh;

    background:
        radial-gradient(
            circle at 50% 0%,
            #452333 0%,
            #251923 28%,
            #171219 65%,
            #100b10 100%
        );

    color: var(--text);

    font-family:
        'Quicksand',
        Arial,
        sans-serif;

    line-height: 1.7;

}


/* Subtle background texture */

body::before {

    content: "";

    position: fixed;

    inset: 0;

    pointer-events: none;

    opacity: .08;

    background-image:
        radial-gradient(
            rgba(255,255,255,.6) 1px,
            transparent 1px
        );

    background-size: 70px 70px;

}


/* =========================================================
   MAIN SITE WIDTH
   ========================================================= */

.site {

    width: min(1100px, 92%);

    margin: 35px auto;

}


/* =========================================================
   HEADER
   ========================================================= */

.header {

    padding: 65px 25px 40px;

    text-align: center;

    background:
        linear-gradient(
            145deg,
            rgba(55,28,40,.98),
            rgba(23,18,25,.98)
        );

    border: 1px solid var(--border);

    box-shadow:
        0 0 35px rgba(0,0,0,.45);

}


/* Cross */

.cross {

    width: 65px;

    height: 65px;

    margin: 0 auto 20px;

    display: flex;

    justify-content: center;

    align-items: center;

    font-family: Georgia, serif;

    font-size: 45px;

    color: var(--light-pink);

    border: 1px solid var(--border-light);

    box-shadow:
        0 0 18px rgba(166,56,82,.25);

}


.eyebrow {

    color: var(--pink);

    font-size: 11px;

    letter-spacing: .22em;

}


h1 {

    margin: 8px 0;

    font-family:
        'Cinzel',
        Georgia,
        serif;

    font-size: clamp(38px, 7vw, 70px);

    font-weight: 500;

    letter-spacing: .08em;

    color: var(--light-pink);

    text-shadow:
        0 2px 5px #090609,
        0 0 15px rgba(189,77,104,.3);

}


.subtitle {

    margin: 5px 0 20px;

    color: var(--text-soft);

    letter-spacing: .08em;

}


.divider {

    margin: 20px 0;

    color: var(--crimson);

}


/* =========================================================
   NAVIGATION
   ========================================================= */

nav {

    display: flex;

    justify-content: center;

    flex-wrap: wrap;

    gap: 10px;

}


nav a {

    padding: 8px 18px;

    color: var(--light-pink);

    background: #2c1a25;

    border: 1px solid var(--border);

    text-decoration: none;

    text-transform: uppercase;

    font-size: 11px;

    letter-spacing: .12em;

    transition: .3s ease;

}


nav a:hover {

    color: white;

    background: var(--crimson);

    border-color: var(--bright-red);

    box-shadow:
        0 0 14px rgba(189,77,104,.35);

}


/* =========================================================
   MAIN
   ========================================================= */

main {

    margin-top: 25px;

}


/* =========================================================
   INTRODUCTION
   ========================================================= */

.intro {

    padding: 45px;

    text-align: center;

    background: var(--panel);

    border: 1px solid var(--border);

    box-shadow:
        0 5px 20px rgba(0,0,0,.25);

}


.small-title {

    color: var(--pink);

    font-size: 11px;

    letter-spacing: .2em;

}


.intro h2 {

    margin: 12px 0;

    font-family:
        'Cinzel',
        Georgia,
        serif;

    font-size: 32px;

    font-weight: 500;

    color: var(--light-pink);

}


.intro p {

    max-width: 680px;

    margin: 8px auto;

    color: var(--text-soft);

}


.quote {

    margin-top: 25px;

    color: var(--pink);

    font-family: Georgia, serif;

    font-style: italic;

    font-size: 15px;

}


/* =========================================================
   SECTION HEADINGS
   ========================================================= */

.section-heading {

    display: flex;

    justify-content: center;

    align-items: center;

    gap: 20px;

    margin: 65px 0 12px;

}


.section-heading span {

    color: var(--crimson);

    font-size: 18px;

}


.section-heading h2 {

    margin: 0;

    font-family:
        'Cinzel',
        Georgia,
        serif;

    font-size: 28px;

    font-weight: 500;

    text-transform: uppercase;

    letter-spacing: .13em;

    color: var(--light-pink);

}


.section-description {

    margin: 0 auto 30px;

    text-align: center;

    color: var(--muted);

}


/* =========================================================
   CSS GRID
   ========================================================= */

.css-grid {

    display: grid;

    grid-template-columns:
        repeat(
            auto-fit,
            minmax(310px, 1fr)
        );

    gap: 25px;

}


/* =========================================================
   CSS CARDS
   ========================================================= */

.css-card {

    overflow: hidden;

    background: var(--panel);

    border: 1px solid var(--border);

    box-shadow:
        0 7px 22px rgba(0,0,0,.35);

    transition:
        transform .3s ease,
        border-color .3s ease,
        box-shadow .3s ease;

}


.css-card:hover {

    transform: translateY(-5px);

    border-color: var(--border-light);

    box-shadow:
        0 12px 30px rgba(0,0,0,.45),
        0 0 18px rgba(166,56,82,.18);

}


/* =========================================================
   CARD BANNER
   ========================================================= */

.card-banner {

    height: 160px;

    display: flex;

    justify-content: center;

    align-items: center;

    position: relative;

    border-bottom: 1px solid var(--border);

}


.card-banner::before {

    content: "";

    position: absolute;

    inset: 0;

    background:
        radial-gradient(
            circle,
            rgba(255,255,255,.08),
            transparent 65%
        );

}


.card-banner.bloody {

    background:
        radial-gradient(
            circle at center,
            #87344d 0%,
            #572037 38%,
            #2b141f 70%,
            #191016 100%
        );

}


.card-banner.purple {

    background:
        radial-gradient(
            circle at center,
            #765477 0%,
            #49334c 45%,
            #241725 100%
        );

}


.banner-symbol {

    position: relative;

    z-index: 1;

    font-family: Georgia, serif;

    font-size: 60px;

    color: rgba(255,220,230,.75);

    text-shadow:
        0 0 20px rgba(255,180,200,.35);

}


/* =========================================================
   CARD CONTENT
   ========================================================= */

.card-content {

    padding: 27px;

}


.card-content h3 {

    margin: 10px 0;

    font-family:
        'Cinzel',
        Georgia,
        serif;

    font-size: 25px;

    font-weight: 500;

    color: var(--light-pink);

}


.card-content p {

    min-height: 75px;

    color: var(--text-soft);

    font-size: 14px;

}


/* =========================================================
   TAGS
   ========================================================= */

.tag {

    display: inline-block;

    padding: 4px 10px;

    color: var(--light-pink);

    background: #341d28;

    border: 1px solid var(--border-light);

    font-size: 9px;

    letter-spacing: .16em;

}


.tag.horror {

    color: #f2bdc9;

    background: #4a1c2c;

    border-color: var(--crimson);

}


.tag.fantasy {

    color: #d7b9d5;

    background: #35253a;

    border-color: var(--purple);

}


/* =========================================================
   PALETTE DOTS
   ========================================================= */

.palette {

    display: flex;

    gap: 8px;

    margin: 20px 0;

}


.colour {

    width: 22px;

    height: 22px;

    display: inline-block;

    border-radius: 50%;

    border: 1px solid rgba(255,255,255,.25);

}


.colour.crimson {
    background: #a63852;
}


.colour.pink {
    background: #d98299;
}


.colour.mauve {
    background: #765477;
}


.colour.charcoal {
    background: #171219;
}


.colour.purple {
    background: #765477;
}


/* =========================================================
   BUTTONS
   ========================================================= */

.card-buttons {

    display: flex;

    gap: 10px;

}


.button {

    flex: 1;

    padding: 10px;

    text-align: center;

    color: #fff1f5;

    background: var(--crimson);

    border: 1px solid var(--bright-red);

    text-decoration: none;

    text-transform: uppercase;

    font-size: 10px;

    letter-spacing: .1em;

    transition: .3s ease;

}


.button:hover {

    color: white;

    background: var(--bright-red);

    box-shadow:
        0 0 14px rgba(189,77,104,.35);

}


.button.secondary {

    color: var(--light-pink);

    background: #2e1b26;

    border-color: var(--border);

}


.button.secondary:hover {

    background: var(--wine);

    border-color: var(--bright-red);

}


/* =========================================================
   HOW TO USE
   ========================================================= */

.steps {

    display: grid;

    grid-template-columns:
        repeat(
            3,
            1fr
        );

    gap: 20px;

}


.step {

    padding: 30px;

    background: var(--panel);

    border: 1px solid var(--border);

    text-align: center;

}


.number {

    margin-bottom: 8px;

    font-family:
        'Cinzel',
        Georgia,
        serif;

    font-size: 30px;

    color: var(--crimson);

}


.step h3 {

    margin: 5px 0;

    font-family:
        'Cinzel',
        Georgia,
        serif;

    color: var(--light-pink);

}


.step p {

    margin: 5px 0;

    color: var(--text-soft);

    font-size: 13px;

}


/* =========================================================
   FOOTER
   ========================================================= */

footer {

    margin-top: 60px;

    padding: 35px 20px;

    text-align: center;

    border-top: 1px solid var(--border);

}


.footer-cross {

    font-family: Georgia, serif;

    font-size: 30px;

    color: var(--pink);

}


footer p {

    margin: 5px 0;

    font-family:
        'Cinzel',
        Georgia,
        serif;

    font-size: 18px;

    color: var(--light-pink);

}


footer span {

    color: var(--muted);

    font-size: 12px;

}


.footer-credit {

    margin-top: 18px;

    color: #947580;

    font-size: 10px;

    letter-spacing: .08em;

}


/* =========================================================
   SCROLLBAR
   ========================================================= */

::-webkit-scrollbar {

    width: 10px;

}


::-webkit-scrollbar-track {

    background: #120c11;

}


::-webkit-scrollbar-thumb {

    background: #653246;

    border: 2px solid #120c11;

}


::-webkit-scrollbar-thumb:hover {

    background: var(--crimson);

}


/* =========================================================
   TEXT SELECTION
   ========================================================= */

::selection {

    background: var(--crimson);

    color: white;

}


/* =========================================================
   LINKS
   ========================================================= */

a {

    transition: .3s ease;

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 700px) {

    .site {

        width: 94%;

        margin: 15px auto;

    }


    .header {

        padding: 45px 15px 30px;

    }


    .intro {

        padding: 30px 20px;

    }


    .steps {

        grid-template-columns: 1fr;

    }


    .css-grid {

        grid-template-columns: 1fr;

    }


    .section-heading {

        margin-top: 45px;

    }


    .card-buttons {

        flex-direction: column;

    }


    .button {

        width: 100%;

    }

}
```