.public-home-page {
    background:
        radial-gradient(circle at top left, rgba(var(--mud-palette-primary-rgb), .12), transparent 32%),
        linear-gradient(180deg, var(--mud-palette-background) 0%, var(--mud-palette-surface) 100%);
}

.hero-banner-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    background:
        linear-gradient(180deg, rgba(5, 8, 7, .08), rgba(5, 8, 7, .2) 24%, rgba(5, 8, 7, .44) 100%),
        linear-gradient(90deg, rgba(7, 11, 10, .52), rgba(7, 11, 10, .16) 55%, rgba(7, 11, 10, .08));
}

.hero-banner-image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hero-banner-content {
    position: relative;
    z-index: 2;
}

.home-section {
    border-radius: 24px;
}

.welcome-text-content {
    white-space: pre-line;
}

.hero-banner-section {
    position: relative;
    overflow: hidden;
    padding: 2rem;
    min-height: 280px;
    color: #fff;
    display: flex;
    align-items: flex-end;
}

.hero-banner-section--themed {
    background-image: linear-gradient(135deg, color-mix(in srgb, var(--mud-palette-primary) 76%, #0b0906 24%) 0%, color-mix(in srgb, var(--mud-palette-secondary) 58%, #0b0906 42%) 100%);
    background-size: cover;
    background-position: center;
}

.gallery-image,
.banner-preview-image,
.dialog-preview-image,
.custom-card-image {
    border-radius: 18px;
    object-fit: cover;
    width: 100%;
}

.gallery-image,
.banner-preview-image,
.dialog-preview-image {
    max-height: 240px;
}

.custom-card-image {
    max-height: 260px;
}

.responsive-video-frame {
    position: relative;
    width: 100%;
    padding-top: 56.25%;
    overflow: hidden;
    border-radius: 20px;
}

.responsive-video-frame iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

.home-banner-preview,
.home-section-admin-card {
    border-radius: 24px;
}

@media (max-width: 768px) {
    .hero-banner-section {
        min-height: 220px;
        padding: 1.5rem;
    }
}