@layer theme {

    .templateHomepageIntro {
        .inner {
            gap: var(--padding);
            align-items: center;
            .title {
                display: flex;
                gap: var(--gutter);
                align-items: center;
                justify-content: center;
                margin-bottom: var(--padding);
                font-weight: 400;
                flex-wrap: nowrap;
                flex-direction: column;
                img {
                    width: 96px;
                    height: 96px;
                    border-radius: var(--circle-radius);
                    object-fit: cover;
                    @media (max-width: 56em) {
                        width: 80px;
                        height: 80px;
                        margin: 8px;
                    }
                    @media (--max-fablet) {
                        width: 80px;
                        height: 80px;
                        margin: 8px;
                    }
                }
                div {
                    height: 96px;
                    align-items: center;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    gap: var(--gutter);
                    @media (max-width: 56em) {
                        gap: calc(var(--padding) / 2);
                        height: 80px;
                    }
                    @media (--max-fablet) {
                        gap: calc(var(--padding) / 2);
                        height: 80px;
                    }
                }
            }
            .intro {
                text-align: center;
                font-size: var(--s-fontsize);
                line-height: var(--s-lineheight);
            }
            @media (min-width: 56em) {
                .intro {
                    width: 50%;
                }
            }
            @media (--min-fablet) {
                .intro {
                    width: 50%;
                }
            }
            @media (max-width: 56em) {
                .title {
                    row-gap: 0;
                }
                img {
                    width: 80px;
                    height: 80px;
                }
            }
            @media (--max-fablet) {
                .title {
                    row-gap: 0;
                }
                img {
                    width: 80px;
                    height: 80px;
                }
            }
        }
    }
}