.benefits .headline {
    grid-area: 1/3/1/span 3;
}

.benefits .benefits-container {
    grid-area: 1/6/1/span 7;
    grid-template-columns: repeat(4, auto);
    grid-column-gap: var(--grid-gap);
    grid-row-gap: max(48px, 4.21875vw);
}

.benefits .benefits-container .benefit-item {
    cursor: pointer;
    transition: var(--def-trans);
}

.benefits .benefits-container .benefit-item:hover {
    color: var(--gray);
}

.benefits .benefits-container .benefit-item .benefit-icon {
    width: max(64px, 5.9375vw);
    aspect-ratio: 1/1;
    margin-bottom: max(16px, 0.9375vw);
    mask-size: contain;
    mask-repeat: no-repeat;
    mask-position: center;
    background: currentColor;
}

.benefits .benefits-container .benefit-item .benefit-title {
	max-width: 20ch;
	word-break: break-word;
	hyphens: auto;
	text-wrap: balance;
	text-transform: none;
	line-height: 1.4;
}

.benefits .benefits-slider-container {
    grid-area: 1/6/1/span 7;
    z-index: 1;
	box-shadow: 4px 4px 20px 0 rgba(0,0,0,.25);
    padding: max(32px, 3.125vw) var(--m-large);
    opacity: 0;
    visibility: hidden;
    height: fit-content;
    transition: var(--def-trans);
    position: sticky;
    top: calc(var(--header-height) + var(--grid-gap));
}

.benefits .benefits-slider-container.active {
    opacity: 1;
    visibility: visible;
    transition: var(--def-trans);
}

.benefits .benefits-slider-container .close-btn {
    position: absolute;
    top: max(32px, 1.875vw);
    right: max(32px, 1.875vw);
    z-index: 1;
}

.benefits .benefits-slider-container .benefit-item {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
}

.benefits .benefits-slider-container .benefit-item .benefit-title {
    grid-area: 1/1/1/span 5;
}

.benefits .benefits-slider-container .benefit-item .benefit-icon {
    grid-area: 2/1/2/1;
    width: max(64px, 5.9375vw);
    aspect-ratio: 1/1;
    margin-bottom: max(16px, 0.9375vw);
    mask-size: contain;
    mask-repeat: no-repeat;
    mask-position: center;
    background: currentColor;
}

.benefits .benefits-slider-container .benefit-item .benefit-description {
    grid-area: 2/2/2/span 4;
}

@media (max-width: 1199.98px) {
    .benefits .headline {
        margin-bottom: var(--m-medium);
    }
  
    .benefits .benefits-container {
        grid-area: 2/3/2/span 10;
    }
    
    .benefits .benefits-slider-container {
        grid-area: 2/3/2/span 10;
    }
}

@media (max-width: 991.98px) {
    .benefits .benefits-container {
        grid-template-columns: repeat(3, auto);
    }
}

@media (max-width: 767.98px) {
    .benefits .benefits-container {
        grid-template-columns: repeat(2, auto);
    }
}

@media (max-width: 575.98px) {
    .benefits .headline {
        grid-area: 1/2/1/span 12;
    }
  
    .benefits .benefits-container {
        grid-area: 2/2/2/span 12;
    }
    
    .benefits .benefits-slider-container {
        grid-area: 2/2/2/span 12;
        padding: max(24px, 3.125vw);
    }
    
    .benefits .benefits-slider-container {
        height: fit-content;
    }
    
    .benefits .benefits-slider-container .benefit-item .benefit-title {
        grid-area: 1/1/1/span 4;
    }

    .benefits .benefits-slider-container .benefit-item .benefit-icon {
        grid-area: 2/1/2/span 5;
    }
    
    .benefits .benefits-slider-container .benefit-item .benefit-description {
        grid-area: 3/1/3/span 5;
        width: 100%;
    }

    /* NEW */
    body:has(.benefits-slider-container.active) {
        overflow: hidden;
    }

    .benefits .benefits-slider-container {
        position: fixed;
        top: calc(var(--header-height) + var(--grid-gap));
        height: calc(100vh - var(--header-height) - (var(--grid-gap) * 2));
        height: calc(100dvh - var(--header-height) - (var(--grid-gap) * 2));
        width: calc(100% - (var(--grid-gap) * 2));
        left: var(--grid-gap);
    }

    .benefits .benefits-slider-container .benefits-slider {
        max-height: calc(100% - max(32px, 1.5625vw) - var(--m-small));
        overflow: hidden;
    }

    .benefits .benefits-slider-container .benefit-item {
        display: flex;
        flex-direction: column;
        max-height: calc(100vh - var(--header-height) - (var(--grid-gap) * 2) - max(32px, 1.5625vw) - var(--m-small) - (max(24px, 3.125vw) * 2));
        max-height: calc(100dvh - var(--header-height) - (var(--grid-gap) * 2) - max(32px, 1.5625vw) - var(--m-small) - (max(24px, 3.125vw) * 2));
        height: 100%;
    }
    
    .benefits .benefits-slider-container .benefit-item .benefit-title {
        max-width: calc(100% - max(36px, 1.640625vw) - max(32px, 1.875vw));
    }

    .benefits .benefits-slider-container .benefit-item .benefit-description {
        height: auto;
        overflow-y: auto;
    }
  
    .benefits .benefits-slider-container .benefits-slider-nav {
        position: absolute;
        bottom: max(24px, 3.125vw);
        right: max(24px, 3.125vw);
    }
}