.showcase-page.showcase-appearance {
    background: var(--showcase-background, #f7fbf9);
    color: var(--showcase-text, #183a32);
}

.showcase-appearance h1,
.showcase-appearance h2,
.showcase-appearance h3,
.showcase-appearance .showcase-section,
.showcase-appearance .showcase-action-grid a {
    color: var(--showcase-text, #183a32);
}

.showcase-appearance .showcase-section,
.showcase-appearance .showcase-action-grid a {
    background: var(--showcase-surface, #ffffff);
}

.showcase-font-modern {
    font-family: Arial, Helvetica, sans-serif;
}

.showcase-font-elegant {
    font-family: Georgia, "Times New Roman", serif;
}

.showcase-font-elegant .btn,
.showcase-font-elegant .showcase-kicker {
    font-family: Arial, Helvetica, sans-serif;
}

.showcase-hero-centered .showcase-profile-head {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
}

.showcase-hero-centered .showcase-contact-list {
    justify-content: center;
}

.showcase-hero-centered .showcase-profile-head > .btn {
    justify-self: center;
}

.showcase-hero-compact .showcase-hero {
    padding-top: 2.5rem;
    padding-bottom: 2.25rem;
}

.showcase-hero-compact .showcase-avatar {
    width: 104px;
    height: 104px;
}

.showcase-hero-compact .showcase-profile-head h1 {
    font-size: clamp(2rem, 5vw, 3.5rem);
}

.showcase-avatar-circle .showcase-avatar {
    border-radius: 50%;
}

.showcase-avatar-square .showcase-avatar {
    border-radius: .45rem;
}

.showcase-cards-bordered .showcase-section,
.showcase-cards-bordered .showcase-action-grid a {
    border: 2px solid color-mix(in srgb, var(--showcase-accent) 32%, transparent);
    box-shadow: none;
}

.showcase-cards-flat .showcase-section,
.showcase-cards-flat .showcase-action-grid a {
    border-color: transparent;
    border-radius: .5rem;
    box-shadow: none;
}

.showcase-buttons-pill .showcase-profile-head .btn,
.showcase-buttons-pill .showcase-action-grid a,
.showcase-buttons-pill .showcase-socials a {
    border-radius: 999px;
}

.showcase-buttons-square .showcase-profile-head .btn,
.showcase-buttons-square .showcase-action-grid a,
.showcase-buttons-square .showcase-socials a {
    border-radius: .35rem;
}

.showcase-width-compact .showcase-content-grid,
.showcase-width-compact .showcase-content-container {
    max-width: 860px;
}

.showcase-width-wide .showcase-content-grid,
.showcase-width-wide .showcase-content-container {
    max-width: 1240px;
}

@media (max-width: 767.98px) {
    .showcase-hero-compact .showcase-profile-head {
        gap: 1.25rem;
    }
}