.content-module {
    margin-bottom: 1.5rem;
}

.content-module-inner {
    position: relative;
}

.content-module-header {
    margin-bottom: 1rem;
}

    .content-module-header h2 {
        font-size: 1.35rem;
        font-weight: 700;
        margin: 0;
    }

    .content-module-header p {
        color: #6c757d;
        margin: .35rem 0 0;
    }

.content-module-full-width {
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
}

    .content-module-full-width > .content-module-inner {
        max-width: none;
    }

.content-module-no-padding {
    margin-bottom: 0;
}

/* Hero */

.content-hero {
    position: relative;
    overflow: hidden;
    border-radius: 1.25rem;
    background: linear-gradient(135deg, #172033, #31415f);
    color: #fff;
    min-height: 320px;
    display: flex;
    align-items: center;
}

.content-hero-background {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    opacity: .42;
}

.content-hero-overlay {
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at top left, rgba(255,255,255,.18), transparent 34%), linear-gradient(90deg, rgba(0,0,0,.74), rgba(0,0,0,.22));
}

.content-hero-body {
    position: relative;
    z-index: 2;
    max-width: 760px;
    padding: 3rem;
}

.content-hero-kicker {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    font-size: .85rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    opacity: .85;
    margin-bottom: .75rem;
}

.content-hero-title {
    font-size: clamp(2rem, 4vw, 4rem);
    line-height: 1;
    font-weight: 800;
    margin: 0 0 1rem;
}

.content-hero-subtitle {
    font-size: 1.15rem;
    line-height: 1.6;
    opacity: .92;
    margin-bottom: 1.5rem;
}

.content-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
}

.content-hero-search {
    margin-top: 1.5rem;
    max-width: 640px;
}

    .content-hero-search .form-control,
    .content-hero-search .input-group-text {
        border: 0;
    }

@media (max-width: 767.98px) {
    .content-hero {
        min-height: 260px;
        border-radius: 1rem;
    }

    .content-hero-body {
        padding: 2rem;
    }
}