section.squares-scroll-animation {
    padding: 80px 0 110px 0;
    
    & .container {
        max-width: 1256px;
        margin: 0 auto;
    }
    
    & h2 {
        max-width: 770px;
        margin: 0 auto;
        text-align: center;
        margin-bottom: 48px;
    }
    
    & .scroll-squares-wrapper {
        display: flex;
        gap: 24px;

        & .scroll-square {
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            gap: 10px;
            width: calc(50% - 12px);
            border-radius: 20px;
            border: 1px solid rgba(255, 255, 255, 0.60);
            background: #FFF;
            box-shadow: 0 0.5px 0 0 rgba(255, 255, 255, 0.50) inset, 0 1px 8px 0 rgba(233, 223, 255, 0.30), 0 1px 36px 0 rgba(119, 26, 119, 0.10);
            
            & .scroll-square-images {
                border-radius: 0 0 20px 20px;
                overflow: hidden;
                width: calc(100% + 2px);
                max-width: calc(100% + 2px);
                margin-bottom: -1px;
                margin-right: -1px;
                margin-left: -1px;
                position: relative;
            }

            & .scroll-square-text {
                padding: 32px 28px 0 42px;
                
                & .icon {
                    aspect-ratio: 1/1;
                    display: inline-flex;
                    align-items: center;
                    margin: 0;
                    padding: 12px;
                    line-height: 0;
                    border-radius: 14px;
                    border: 1px solid rgba(255, 255, 255, 0.20);
                    background: linear-gradient(38deg, #215273 -1.81%, #00A398 151.16%);
                    box-shadow: 0 0 10px 0 rgba(0, 163, 152, 0.35), 0 1px 1.5px 0 rgba(33, 82, 115, 0.20), 0 4px 6px 0 rgba(255, 255, 255, 0.20) inset;
                    margin-bottom: 20px;
                    
                    img {
                        width: 24px;
                        height: auto;
                        margin: 0;
                        padding: 0;
                        filter: brightness(0) saturate(100%) invert(99%) sepia(0%) saturate(2%) hue-rotate(126deg) brightness(104%) contrast(101%);
                    }
                }
                
                & h3 {
                    color: #343A40;
                    font-size: 20px;
                    font-weight: 600;
                    line-height: 125%;
                    margin-bottom: 12px;
                    letter-spacing: normal;
                }
                
                & p {
                    font-size: 16px;
                    font-style: normal;
                    font-weight: 400;
                    line-height: 150%;
                    letter-spacing: 0.08px;
                }
            }

            & img {
                margin: 0;
            }
            
            &:last-child {
                & .scroll-square-images {
                    padding-left: 20px;
                }

                .scroll-square-text {
                    padding: 32px 24px 0 42px;
                }
            }
        }
    }
    
    & .scroll-square-animation {
        height: 291px;
        width: 100%;
        box-shadow: 32px 32px 64px 0 rgba(52, 64, 84, 0.08);

        > div {
            height: 291px;
            width: 100%;
            transform: rotate(-22.5deg) skew(7.5deg, 7.5deg) translate(13px, 20px);
            display: grid;
            grid-template-columns: auto auto auto;
            gap: 12px;
        }
        
        &::after {
            display: block;
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            height: 83.482px;
            background: linear-gradient(rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 100%);
        }
        
        img {
            margin: 0;
            padding: 0;
            aspect-ratio: 202/125;
            width: 220px;
            min-width: 220px;
            object-fit: cover;
            object-position: center top;
            box-shadow: 32px 32px 64px 0 rgba(52, 64, 84, 0.08);
            border-radius: 10.667px;
            backface-visibility: hidden;
            transform: translateZ(0);
        }
        
        .scroll-square-col1,
        .scroll-square-col2,
        .scroll-square-col3 {
            display: flex;
            flex-direction: column;
            gap: 12px;
            will-change: left, top;
            backface-visibility: hidden;
            transform-style: preserve-3d;
        }
    }
}


@media (max-width: 1200px) and (min-width: 901px) {
    section.squares-scroll-animation {
        & .scroll-squares-wrapper {
            & .scroll-square {
                &:last-child {
                    & .scroll-square-text {
                        padding: 32px 24px 0 24px;
                    }

                    & .scroll-square-images {
                        padding-left: 0;
                    }
                }
                & .scroll-square-text {
                    padding: 32px 24px 0 24px;
                }
                
                & .scroll-square-animation {
                    height: 250px;
                    
                    > div {
                        height: 250px;
                        gap: 8px;
                        transform: rotate(-22.5deg) skew(7.5deg, 7.5deg) translate(-10px, 15px);
                    }
                    
                    img {
                        width: 180px;
                        min-width: 180px;
                    }
                }
            }
        }
    }
}

@media (max-width: 900px) {
    section.squares-scroll-animation {
        & .scroll-squares-wrapper {
            flex-direction: column;
            align-items: center;

            & .scroll-square {
                width: 100%;
                max-width: 564px;
            }
        }
    }
}


@media (max-width: 600px) {
    section.squares-scroll-animation {
        & .scroll-squares-wrapper {
            & .scroll-square {
                &:last-child {
                    & .scroll-square-text {
                        padding: 32px 24px 0 24px;
                    }

                    & .scroll-square-images {
                        padding-left: 0;
                    }
                }
                & .scroll-square-text {
                    padding: 32px 24px 0 24px;
                }
                
                & .scroll-square-animation {
                    height: 250px;
                    
                    > div {
                        height: 250px;
                        gap: 8px;
                        transform: rotate(-22.5deg) skew(7.5deg, 7.5deg) translate(-10px, 15px);
                    }
                    
                    img {
                        width: 180px;
                        min-width: 180px;
                    }

                    &::after {
                        height: 80px;
                    }
                }
            }
        }
    }
}
@media (max-width: 460px) {
    section.squares-scroll-animation {
        & .scroll-squares-wrapper {
            & .scroll-square {
                & .scroll-square-animation {
                    height: 200px;
                    
                    > div {
                        height: 200px;
                        gap: 5px;
                        transform: rotate(-22.5deg) skew(7.5deg, 7.5deg) translate(-10px, 10px);
                    }
                    
                    img {
                        width: 120px;
                        min-width: 120px;
                    }

                    &::after {
                        height: 50px;
                    }
                }
            }
        }
    }
}