/* ==========================================================
   XXL4YOU 2.0
   Startseite – Hero
   hero.css
   ========================================================== */

.home-hero {
    position: relative;
    overflow: hidden;

    background-image: url("/assets/images/home/home-hero-lady.png");
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 100% auto;
}

.home-hero::after {
    content: "";

    position: absolute;

    left: 0;
    right: 0;
    bottom: 0;

    height: 2px;

    background: var(--color-border-soft);
}

.home-hero .container {
    width: min(var(--container-width), calc(100% - 40px));
    margin: 0 auto;
}

.home-hero__content {
    position: relative;
    z-index: 1;

    max-width: 920px;
    padding: var(--space-xl) 0;
}

.home-hero__title {
    margin: 0 0 var(--space-md);

    color: var(--color-text-light);

    font-family: var(--font-family-base);
    font-size: var(--heading-1);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-heading);
    letter-spacing: var(--letter-spacing-tight);
}

.home-hero__description {
    margin: 0 0 var(--space-sm);

    color: var(--color-text);

    font-size: var(--text-lg);
    font-weight: var(--font-weight-normal);
    line-height: var(--line-height-relaxed);
}

.home-hero__description:last-child {
    margin-bottom: 0;
}

.home-hero__intro {
    color: var(--color-text-light);
    font-weight: var(--font-weight-medium);
}

@media (max-width: 768px) {
	
	.home-hero {
		background: var(--color-main-background) !important;
	}

	.home-hero .container {
		width: min(100%, calc(100% - 24px));
	}
	
	.home-hero__content {
		max-width: none;
		padding: var(--space-md) 0;
	}

    .home-hero__title {
        margin-bottom: var(--space-sm);
        font-size: var(--heading-2);
    }

    .home-hero__description {
        font-size: var(--text-base);
        line-height: var(--line-height-normal);
    }

}

@media (max-width: 991px) {

    .home-hero {
        background-image: none !important;
        background-color: var(--color-main-background);
    }

}