@import "globals.css";

.generic-card
{
    grid-area: card;
    display: grid;
    background-color: var(--color-surface);
    border: var(--border-thin);
    border-radius: var(--radius-main);
    padding: var(--space-lg);
    box-shadow: 0 10px 30px oklch(0% 0 0 / 30%);
    box-sizing: border-box; /* Include padding and border in the element's total width and height */
    padding: var(--content-padding);
    gap: var(--space-md); /* Consistent spacing between elements */
    justify-self: center; /* Keep the card centered in its grid cell horizontally */
}

/* modifier for .generic-card that makes it transparent, while keeping its alignment and sizing properties */
.generic-card--transparent
{
    background-color: transparent;
}