#hero {
    padding-bottom: 0;

    .container {
        display:        flex;
        flex-direction: column;
        align-items:    center;
        gap:            20px;
        border-bottom:  1px solid #F1F0EF;
        padding-bottom: 50px;

        .hero {
            padding: 162px 0 0;

            &.section-title {
                max-width: 500px;
            }

            .breadcrumb {
                display:         flex;
                align-items:     center;
                justify-content: center;

                & li {
                    display: contents;

                    &, & a {
                        font-size:       14px;
                        font-style:      normal;
                        font-weight:     600;
                        line-height:     20px; /* 142.857% */
                        color:           #7061EF;
                        text-decoration: none;
                    }

                    &:last-child {
                        &, & a {
                            color: #2F1D49;
                        }
                    }

                    & + li::before {
                        content: "/\00a0";
                        color:   black;
                        padding: 0 0 0 5px;
                    }
                }
            }
        }
    }
}

#feature-item {
    .container {
        .content {
            padding:    40px 0 100px;
            margin:     0 auto;
            max-width:  846px;

            & p, & p a {
                font-size:      14px;
                font-style:     normal;
                font-weight:    400;
                line-height:    20px; /* 142.857% */
                color:          #7D89B0;
                padding-bottom: 20px;
            }

            & h1, h2, h3, h4, h5, h6 {
                font-size:      16px;
                font-style:     normal;
                font-weight:    600;
                line-height:    22px; /* 137.5% */
                color:          #2F1D49;
                padding:        0 0 10px;
            }

            & p + h1, h2, h3, h4, h5, h6 {
                padding-top: 30px;
            }

            & img + p {
                padding-top: 30px;
            }

            & img {
                width:          100%;
                max-width:      100%;
                max-height:     441px;
                object-fit:     contain;
                /*border-radius:  10px;*/
                background:     #f8f9fa;
            }

            & iframe {
                max-width:      100%;
                width:          100%;
                aspect-ratio:   16 / 9;
            }

            & ul, ol {
                margin-left:    30px;
                padding-bottom: 10px;

                & li {
                    font-size:      13px;
                    font-style:     normal;
                    font-weight:    400;
                    line-height:    21px;
                    color:          #7D89B0;
                    padding-bottom: 10px;
                    list-style:     initial;
                }
            }
        }
    }
}

#features {
    padding-bottom: 150px;

    & h3 {
        font-size:      16px;
        font-style:     normal;
        font-weight:    600;
        line-height:    26px; /* 162.5% */
        color:          #2F1D49;
        text-align:     center;
        margin-bottom:  26px;
    }
}

@media screen and (max-width: 1280px) {
    #feature-item {
        .container {
            .content {
                padding: 40px 100px 80px;
            }
        }
    }

    #features {
        padding-bottom: 100px;
    }
}

@media screen and (max-width: 1024px) {
    #feature-item {
        .container {
            .content {
                padding: 40px 80px 80px;
            }
        }
    }
}

@media screen and (max-width: 768px) {
    #feature-item {
        .container {
            .content {
                padding: 40px 30px 80px;
            }
        }
    }

    #features {
        padding-bottom: 70px;
    }
}

@media screen and (max-width: 600px) {
    #feature-item {
        .container {
            .content {
                padding: 40px 0 50px;
            }
        }
    }

    #features {
        padding-bottom: 50px;
    }
}

@media screen and (max-width: 480px) {
    #hero {
        .container {
            padding-bottom: 40px;

            .hero {
                padding: 93px 0 0;

                &.section-title {
                    max-width: 100%;
                }
            }
        }
    }

    #feature-item {
        .container {
            .content {
                & h4 {
                    font-size:   14px;
                    line-height: 20px;
                }
            }
        }
    }

    #features {
        & h3 {
            margin-bottom:  16px;
        }
    }
}