﻿.home-accordion {
    width: 100%;
    height: 90vh;
    height: 90dvh;
	user-select: none;
	min-height: 640px;
}

.home-accordion .content {
	width: 100%;
    display: flex;
    flex-wrap: nowrap;
    height: 90vh;
    height: 90dvh;
    overflow: hidden;
	min-height: 640px;
}

.accordion-item {
    flex: 1;
    position: relative;
    overflow: hidden;
    transition: all 400ms;
    display: flex;
    align-items: end;
	/*background-repeat: no-repeat;
	background-size: calc((80vw - var(--navbar-width)) / 5 * 2) auto;
	background-position: center bottom;*/
	background-image: none !important;
}
.accordion-item::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}
.accordion-item:hover {
    flex: 1.8;
}

.accordion-item img {
    position: absolute;
	bottom: min(0px, calc(30vh - 20vw));
    left: 50%;
    transform: translateX(-50%);
    width: calc((80vw - var(--navbar-width)) / 5 * 2);
	min-width: 448px;
    transition: all 400ms;
}

.accordion-item.item-1 {
    background-color: var(--color-blue);
	background-image: url("/images/ljudi/People-CalmSleep.png");
}
.accordion-item.item-1::after{
    background: linear-gradient(to top, #0054A688, transparent 50%);
}
.accordion-item.item-2 {
    background-color: var(--color-red);
	background-image: url("/images/ljudi/People-Energy.png");
}
.accordion-item.item-2::after{
    background: linear-gradient(to top, #D5143C88, transparent 50%);
}
.accordion-item.item-3 {
    background-color: var(--color-purple);
	background-image: url("/images/ljudi/People-Beauty.png");
}
.accordion-item.item-3::after{
    background: linear-gradient(to top, #AA55A188, transparent 50%);
}
.accordion-item.item-4 {
    background-color: var(--color-orange);
	background-image: url("/images/ljudi/People-Immunity.png");
}
.accordion-item.item-4::after{
    background: linear-gradient(to top, #D65D2A88, transparent 50%);
}
.accordion-item.item-5 {
    background-color: var(--color-green);
	background-image: url("/images/ljudi/People-WellBeing.png");
}
.accordion-item.item-5::after{
    background: linear-gradient(to top, #00984888, transparent 50%);
}

.accordion-overlay {
    z-index: 2;
    padding: 32px;
    color: #fff;
    margin-bottom: 32px;
    width: 15vw;
    box-sizing: border-box;
    font-size: 1.125rem;
}

.accordion-overlay h2 {
    font-family: CenturyGothicBold;
    font-size: 2rem;
}

.accordion-overlay h2 a {
	color: #fff;
	text-decoration: none;
}

.overlay-desc {
	height: 128px;
	line-height: 1.4;
	display: flex;
	align-items: center;
}

.overlay-link {
    padding-top: 32px;
}

.overlay-link a {
    color: #fff;
}

@media only screen and (max-width: 1600px) {
	.overlay-desc {
		/*height: 120px;*/
		line-height: 1.4;
	}
}

@media screen and (max-width: 1280px) {
	.home-accordion {
		overflow-x: auto;
	}
	.home-accordion::-webkit-scrollbar {
		width: 0;
		height: 0;
	}
	.home-accordion .content {
		width: 1400px;
	}
	
	.accordion-item {
		width: 280px;
	}
	.accordion-item:hover {
		flex: 1;
	}
	
	.accordion-overlay {
		width: 100%;
	}
	.overlay-desc {
		height: 96px;
	}
}