.SplashPage {
    background-color: var(--white);
    border-radius: 3px;
    margin-bottom: 40px;
    width: 100%;
    
    &-content {
        margin-left: auto;
        margin-right: auto;
        max-width: 1200px;
        padding-bottom: 56px;
        padding-left: 56px;
        padding-right: 56px;
        padding-top: 48px;
    }

    &-hero {
        align-items: center;
        display: flex;

        &-text {
            flex-shrink: 0;
            margin-right: 80px;
            width: 368px;
        }

        &-heading {
            font-size: 32px;
            margin-bottom: 16px;
        }

        &-paragraph {
            font-size: 16px;
            margin-top: 16px;
        }

        &-image-container {
            flex-shrink: 1;
        }

        &-image {
            max-width: 100%;
        }
    }

    &-summary {
        align-items: flex-start;
        display: flex;
        justify-content: center;
        margin-top: 48px;

        &-feature {
            text-align: center;
            width: 264px;
            
            &:not(:last-child) {
                margin-right: 112px;
            }

            &-heading {
                font-size: 18px;
                font-weight: 500;
                margin-bottom: 8px;
                margin-top: 24px;
            }
        }
    }

    &-learn-more {
        align-items: center;
        display: flex;
        flex-direction: column;
        font-weight: 500;
        margin-bottom: 88px;
        margin-top: 56px;
        
        &-text {
            color: var(--gray-800);
            margin-top: 4px;
        }
    }

    &-feature {
        align-items: center;
        display: flex;
        margin-bottom: 80px;
        padding-left: 56px;
        padding-right: 56px;

        & > * {
            width: calc(50% - 52px);

            &:not(:last-child) {
                margin-right: 104px;
            }
        }

        &-image {
            max-width: 100%;
        }

        &-text {
            &-header {
                font-size: 28px;
                margin-bottom: 32px;
                margin-top: 16px;
            }

            &-paragraph {
                font-size: 14px;
                margin-top: 16px;
            }
        }
    }

    &-back-to-top-button {
        background: none;
        border: 0;
        color: var(--orange);
        display: block;
        font-weight: 500;
        margin-left: auto;
        margin-right: auto;
        padding: 0;
        text-align: center;
        text-transform: uppercase;

        &:hover {
            filter: opacity(50%);
        }

        .Glyph {
            fill: currentColor;
        }
    }

    &-number {
        height: 40px;
        position: relative;
        width: 40px;

        &-background, &-content {
            height: 100%;
            position: absolute;
            width: 100%;
        }

        &-background {
            background-color: currentColor;
            border-radius: 100%;
            filter: opacity(5%);
        }

        &-content {
            align-items: center;
            display: flex;
            font-size: 18px;
            font-weight: 500;
            justify-content: center;
        }

        &--orange {
            color: var(--orange);
        }

        &--indigo {
            color: var(--indigo);
        }

        &--cyan {
            color: var(--cyan);
        }
    }
}