/* ==========================================================
   XXL4YOU 2.0
   Startseite – Informationsbereich
   information-boxes.css
   ========================================================== */

.home-information {
    padding-top: 10px;
    padding-bottom: var(--space-xl);
}

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

.home-information__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-xl);
}

.home-information__item {
    position: relative;
}

.home-information__item:not(:last-child)::after {
    content: "";

    position: absolute;
    top: 8px;
    right: calc(var(--space-xl) / -2);

    width: 1px;
    height: calc(100% - 16px);

    background: var(--color-gold);
	opacity: .35;
}

.home-information__heading {
    display: flex;
    align-items: center;
    gap: var(--space-sm);

    margin-bottom: var(--space-md);
}

.home-information__heading h2 {
    margin: 0;

    color: var(--color-text-light);
    font-size: var(--heading-3);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-heading);
}

.home-information__icon {
    width: 24px;
    height: 24px;

    flex: 0 0 24px;
    display: block;

    filter: brightness(0) saturate(100%)
            invert(73%) sepia(54%) saturate(463%)
            hue-rotate(5deg) brightness(95%) contrast(91%);
}

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

    color: var(--color-text);
    font-size: var(--text-base);
    line-height: var(--line-height-normal);
}

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

.home-information__item a {
    color: var(--color-gold);
    text-decoration: none;
}

.home-information__item a:hover,
.home-information__item a:focus-visible {
    text-decoration: underline;
}

@media (max-width: 992px) {

	.home-information__grid {
		grid-template-columns: 1fr;
		gap: var(--space-md);
	}

    .home-information__item:not(:last-child)::after {
        display: none;
    }

    .home-information__item {
        padding-bottom: var(--space-lg);
        border-bottom: 1px solid var(--color-border-soft);
    }

    .home-information__item:last-child {
        padding-bottom: 0;
        border-bottom: none;
    }

}

@media (max-width: 768px) {

    .home-information {
        padding: var(--space-lg) 0;
    }

	.home-information .container {
		width: min(100%, calc(100% - 24px));
	}
}