.benefits {
    position: relative;
    /* min-height: 100vh; */
    background-color: var(--primary);
    padding: var(--largeTopPadding, 15vh) var(--padding);
}

.benefits .section-title {
    /* position: absolute;
    top: 0;
    left: 0; */
    margin-right: auto;
    text-align: center;
    padding: 2rem var(--font-headline);
    border-bottom-right-radius: var(--border-radius);
    background-color: var(--bg);

    display: block;
    width: fit-content;
    margin-left: calc(0px - var(--padding));
    margin-top: calc(0px - var(--largeTopPadding, 15vh));
}

.benefits .headline {
    text-align: center;
    margin-bottom: var(--smallTopPadding, 5vh);
}
.benefits .benefits-list {
    list-style: none;
    padding: 0;
}

.benefits .benefits-list li {
    background-color: var(--secondary);
    border-radius: var(--border-radius) var(--border-radius) 1rem 1rem;
    display: flex;
    flex-direction: column;
    color: var(--primary);
    padding: var(--gap);
    transform: perspective(100rem) rotate3d(1, 0, 0, -10deg) translateZ(0rem);
    transition: all 1s ease;
    margin-bottom: calc(0px - var(--gap));
    padding-bottom: calc(var(--gap) * 2);
    transform-origin:center bottom;
}

.benefits .benefits-list li > * {
    transform: perspective(100rem) rotate3d(1, 0, 0, 10deg) translateZ(0rem);
    transition: all 1s ease;
}

.benefits .benefits-list li:hover,
.benefits .benefits-list li:hover > * {
    transform: scale(1);
    border-radius: var(--border-radius);
}

.benefits .benefits-list li .headline-icon {
    display: flex;
    flex-direction: row;
    gap: var(--gap);
}


.benefits .benefits-list li:nth-child(2) {
    background-color: #048ecf
}

.benefits .benefits-list li:nth-child(3) {
    background-color: #059ee7
}

.benefits .benefits-list li:nth-child(4) {
    background-color: #02a1ec
}

.benefits .benefits-list li:nth-child(5) {
    background-color: #00adff
}

.benefits .benefits-list li img {
    height: calc(var(--font-headline) * 2 - 1rem);
    width: auto;
    aspect-ratio: 1;
    object-fit: contain;
    object-position: center bottom;
}

.benefits .benefits-list li h3 {
    text-transform: uppercase;
    font-weight: 300;
    font-size: var(--font-headline);
    margin: 0 0 3vh;
    min-height: calc(var(--font-headline) * 2);
    align-content: flex-end;
    line-height: 1;
}

.benefits .benefits-list li .text > p {
    margin: 0;
    max-width: 90rem;
}

@media screen and (max-width: 450px) { 
    .benefits .benefits-list li .headline-icon {
        flex-direction: column;
    }

    .benefits .benefits-list li h3 {
        min-height: 0;
    }

    .benefits .benefits-list li .text > p {
        display: block !important;
    }
}