.hero{
    display: flex;
    flex-direction: column;
    gap: var(--sp-md);
    justify-content: center;
    align-items: center;
    max-width: var(--br-xl);
    margin: 0 auto;
    margin-bottom: var(--sp-md);
}

.hero-section:after{
	content: '';
    position: absolute;
    inset: 0;
    z-index: -1;

    background:
        radial-gradient(
            circle at center center,
          rgba(-47, 126, 147, 0.45),
            transparent 55%
        );
}

.hero .hero-detail{
    justify-content: center;
    align-items: center;
    flex: 0 0 calc(50% - var(--sp-md));
    flex-grow: 1;
}

.head-detail-group .hero-title .text,
.head-detail-group .hero-desc .text{
    text-align: center;
}

.hero .hero-media{
    width: 100%;
    height: 632px;
}

.hero-detail .hero-cta{
    width: 100%;
    text-align: center;
}

.hero-card-group{
    max-width: var(--br-xl);
    margin: 0 auto;
}

.hero-card-group .hero-card-list{
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-sm);
}

.hero-media .hero-card-list .card{
    flex: 0 0 calc(25% - var(--sp-sm));
    flex-grow: 1;
}

.hero-core-card-list .hero-card-list .card{
    flex: 0 0 calc(20% - var(--sp-sm));
    flex-grow: 1;
}

.hero.hero-row{
    flex-direction: row;
    gap: var(--sp-lg);
}

.hero.hero-row .hero-detail{
    justify-content: start;
    align-items: start;
}

.hero.hero-row .head-detail-group .hero-title .text,
.hero.hero-row .head-detail-group .hero-desc .text{
    text-align: start;
}

.hero.hero-row .hero-detail .hero-cta{
    text-align: start;
}

.hero.hero-row .hero-media{
    flex: 0 0 calc(50% - var(--sp-md));
    flex-grow: 1;
}

.hero-blog-search{
    width: 100%;
}

.hero-blog-search .blog-search-input-group{
    display: flex;
    align-items: center;
    flex-direction: column;
    gap: var(--sp-sm);
}

@media (max-width: 991px){
    .hero-detail .hero-cta{
        text-align: start;
    }

    .hero .hero-detail{
        justify-content: start;
        align-items: start;
    }

    .head-detail-group .hero-title .text,
    .head-detail-group .hero-desc .text{
        text-align: start;
    }

    .hero.hero-row{
        flex-direction: column;
        gap: var(--sp-md);
    }

    .hero.hero-row .hero-detail{
        justify-content: start;
        align-items: start;
    }

    .hero.hero-row .head-detail-group .hero-title .text,
    .hero.hero-row .head-detail-group .hero-desc .text{
        text-align: start;
    }

    .hero.hero-row .hero-detail .hero-cta{
        text-align: start;
    }

    .hero-media .hero-card-list .card{
        flex: 0 0 calc(50% - var(--sp-sm));
    }

    .hero-core-card-list .hero-card-list .card{
        flex: 0 0 calc(50% - var(--sp-sm));
    }
}

@media (max-width: 640px){
    .hero-media .hero-card-list .card{
        flex: 0 0 calc(100% - var(--sp-sm));
    } 

    .hero-core-card-list .hero-card-list .card{
        flex: 0 0 calc(100% - var(--sp-sm));
    } 
	
	.hero .hero-media{
		height: 354px;
	}
}