.comparisonSection {
    position: relative;
    padding-bottom: 0% !important; /* to maintain aspect ratio (responsive!) */
}
.comparisonImage {
    width: 100%;
    height: 100%;
}
.afterImage {
    position: absolute;
    overflow: hidden;
    bottom: 0;
    right : 0;
    transform: translate(100%, 0px);
}
.afterImage img {
    transform: translate(-100%, 0px);
}
.comparisonImage img {
    width: 100%;
    height: auto;
    position: absolute;
    bottom: 0;
    right: 0;
    opacity : 1;
}
@media(min-width : 1280px){
.comparisonImage img, .afterImage{
    max-width: 80vw;
}    
}
.comparisonSection .color-titles {
    position: absolute;
    left: 50%;
    transform: translate(-50%, 75px);
    font-size: 3.8rem;
    color : var(--black);
    z-index: 9;
    justify-content: center;
    text-align: center; 
    width : 100%;
}
@media(max-width : 1199px){
    .comparisonSection .color-titles{
        position: relative;
    }
}
.hero__content {
    display: none;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}
.hero__headline {
    --padding: 2rem;
    --duration: 400ms;
    --delay: calc(var(--duration) / 2);
    --ease: cubic-bezier(0.25, 1, 0.5, 1);
    overflow: hidden;
    font-size: 3.5rem;
    margin-top: calc(var(--padding)* -1);
    margin-bottom: 15px;
    padding: var(--padding);
    line-height: 4.25rem;
}
.hero__headline::after {
    content: "";
    position: absolute;
    top: calc(100% - var(--padding));
    left: 0;
    background-color: var(--primaryblue);
    width: 100%;
    height: 1.5vmin;
    transform: scaleX(0);
    transition: transform var(--duration) var(--delay) var(--ease);
}
.hero__headline span {
    display: block;
    transform: translateY(115%);
    transition: transform var(--duration) var(--ease);
}
.active .hero__headline::after {
    transform: scaleX(0.5);
    transition-delay: 0s;
}
.active .hero__headline span {
    transform: translateY(0);
    transition-delay: var(--delay);
}
.hero__maincontent {
    --padding: 2rem;
    --duration: 200ms;
    --delay: calc(var(--duration));
    --ease: 500ms;
    /*position: absolute;*/
    display: block;
    font-size: 2rem;
    overflow: hidden;
    margin-bottom: calc(var(--padding) * -1);
    padding: var(--padding);
}
.hero__maincontent span {
    display: block;
    transform: translateY(-120%);
    transition: transform var(--duration) var(--ease);
}
.active .hero__maincontent::after {
    transform: scaleX(1);
    transition-delay: 0s;
}
.active .hero__maincontent span {
    transform: translateY(0);
    transition-delay: var(--delay);
}

.hero__maincontent a {
    opacity: 0;
    transition: all 1500ms;
}

.active .hero__maincontent a {
    opacity : 1;
}