section.hero {
    div.decoration {
        div.thumbs {
            --imgWidth: 350px;
            --imgHeight: 242px;

            position: absolute;
            top: calc(var(--headerHeight) - 75px);

            display: flex;
            
            .column {
                flex-shrink: 0;

                img {
                    height: var(--imgHeight);
                    width: var(--imgWidth);
                    position: relative;          
                    object-fit: cover;     
                    filter: drop-shadow(0px 0px 8px white);
                    border-radius: 18px;
                    image-rendering: auto;
                }

                &.one {
                    :nth-child(1) {
                        z-index: 5;
                    }

                    :nth-child(2) {
                        z-index: 3;
                        margin-left: 22px;
                    }

                    :nth-child(3) {
                        z-index: 1;
                    }
                }

                &.two {
                    margin-top: calc(var(--imgHeight) / 2);
                    margin-left: -66px;

                    :nth-child(1) {
                        z-index: 4;
                        margin-left: -22px;
                    }

                    :nth-child(2) {
                        z-index: 2;
                    }
                }
            }
        }
    }

    @media (max-width: 1066px) {
        div.decoration {
            padding-left: unset;
            width: 100%;
            position: relative;
            height: 350px;
            margin-bottom: 175px;

            div.thumbs {
                flex-direction: column;
                left: calc(50vw - ((var(--imgWidth) * 3) / 2));
                top: 0;

                div.column {
                    display: flex;

                    img {
                        margin: 0 !important;
                    }

                    &.two {
                        margin-left: calc(var(--imgWidth) / 2);
                        margin-top: -60px;
                    }
                }
            }
        }
    }
}

section.clients {
    position: relative;
    z-index: 5;
    margin-top: -50px;

    h2 {
        text-align: center;
        font-family: 'Montserrat';
        font-weight: 700;
        text-transform: uppercase;
        margin-top: 18px;
        font-size: 16px;
    }
}

section.testimonials {
    margin-top: 66px;
}

section.how-it-works {
    > div.wrapper {
        position: relative;

        video {
            border-radius: 18px;
            box-shadow: 0px 0px 8px 0px rgba(255, 255, 255, 0.25);
            position: absolute;
            right: 875px;
            bottom: 50px;
            width: 720px;
            height: 540px;
            object-fit: cover;
        }
    }

    div.steps {
        margin-top: 44px;
        margin-left: auto;
        margin-right: 0;
        max-width: 800px;

        display: flex;
        flex-direction: column;
        justify-content: center;

        div.step {
            --badgeSize: 90px;
            display: flex;
            gap: 22px;
            position: relative;
            padding-top: 22px;

            &:not(:last-of-type) {
                &::after {
                    content: ' ';
                    border-left: dashed 3px white;
                    height: 100%;
                    position: absolute;
                    left: calc((var(--badgeSize) / 2) - (3px / 2));
                    z-index: -1;
                    opacity: 0.7;
                }
            }

            div.badge {
                width: var(--badgeSize);
                height: var(--badgeSize);
                border-radius: 50%;
                background-color: var(--colourTaurusPrimary);
                border: solid 5px white;
                flex-shrink: 0;
                display: flex;
                align-items: center;
                justify-content: center;
                position: relative;

                svg {
                    width: 50%;
                    fill: white;
                }

                &:hover {
                    box-shadow: 0px 0px 75px 0px rgba(0,143,180,.8);
                }

                &:has(svg.smile) {
                    background-color: var(--colourTaurusSuccess);

                    svg.smile {
                        display: none;
                    }

                    &:hover {
                        box-shadow: 0px 0px 75px 0px rgba(0,180,115,.8);
                        svg {
                            display: none;

                            &.smile {
                                display: block;
                            }
                        }
                    }
                }
            }

            div.content {
                h3 {
                    font-family: 'Encode Sans Black';
                    font-size: 28px;
                    margin-top: 0;
                }

                p:not(.subtitle) {
                    margin-top: 22px;
                }
            }

            &:last-child {
                div.badge {
                    &::after {
                        display: none;
                    }
                }
            }
        }
    }
}