.big-card {
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: calc(100% - 48px);
    background: var(--on-backgroud-color);
    border: 1px solid var(--on-backgroud-color);
    border-radius: var(--primary-border-radius);
    padding: 24px;
    height: fit-content;

    box-shadow: 0 0 4px #0E101312;
    transition: all 0.3s;
}


.medium-card {
    color: var(--primary-text-color);
    width: calc(100% - 32px);
    padding: 12px 16px;
    border-radius: 12px;
    background: var(--on-backgroud-color);
    border: 1px solid var(--on-backgroud-color);
    display: flex;
    flex-direction: column;
    gap: 16px;
    cursor: pointer;

    box-shadow: 0 0 4px #0E101312;
    transition: all 0.3s;
}

.big-card.hidden, .medium-card.hidden{
    display: none;
}

.big-card h1, .big-card h2, .big-card h3, .big-card p, .big-card a {
    margin: 0;
    color: var(--primary-text-color);
}

.medium-card h1, .medium-card h2, .medium-card h3, .medium-card p, .medium-card a {
    margin: 0;
    color: var(--primary-text-color);
}