html {
    --color-primary: var(--palette-memorial-accent);
    --color-accent: var(--palette-memorial-accent);
    --color-secondary: var(--palette-memorial-secondary);
}

.text-data {
    display: flex;
    flex-direction: column;
    align-items: center;

}

.hero-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: var(--space-m);
    box-sizing: border-box;

    .hero-card {
        display: grid;
        grid-template-rows: 2fr 1fr;

        width: 100%;
        overflow: hidden;
        background: var(--color-bg);
        border-radius: var(--round-s);

        img {
            border-radius: 50%;
            width: 80%;
            aspect-ratio: 1;
            height: auto;
            display: block;
            align-self: center;
            justify-self: center;
            margin-top: var(--space-s);
            border: 2px solid var(--color-accent, #5c0000);
        }

        .photo-placeholer {
            background: var(--color-secondary, gray);
            border-radius: 50%;
            width: 80%;
            aspect-ratio: 1;
            height: auto;
            display: block;
            align-self: center;
            justify-self: center;
            margin-top: var(--space-s);
            border: 2px solid var(--color-accent, #5c0000);
        }

        p {
            margin-top: var(--space-s);
            text-align: center;
            word-wrap: break-word;

            color: var(--color-accent, #5c0000);

            margin: var(--space-s);
            margin-bottom: 0;
            border-bottom: 2px solid var(--color-accent);
        }
    }
}