#introducing.introducing-2025 {
    background-color: #f8f8fc;
    border-radius: 0 0 var(--sec-br) var(--sec-br);
    padding: var(--sec-padding1);
    margin-top: 0;
    ul {
        list-style: none;
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        gap: clamp(40px, 4vw, 70px);
        li {
            img {
                margin: 0 auto;
                width: 85%;
                max-width: 245px;
                height: auto;
                display: block;
            }
            .wrap_text {
                display: flex;
                flex-direction: column;
                align-items: center;
                h3 {
                    margin: 20px auto 0;
                }
                p {
                    margin: 20px 0 0;
                }
                a {
                    margin-top: 40px;
                }
            }
        }
    }
}
@media screen and (min-width: 1200px) {
    #introducing.introducing-2025 {
        & ul {
            & li {
                & .wrap_text {
                    p {
                        min-height: 140px;
                    }
                }
            }
        }
    }
}
@media screen and (max-width: 1399px) {
    #introducing.introducing-2025 {
        & ul {
            li {
                width: 90%;
                margin: 0 auto;
                img {
                    width: 65%;
                    max-width: 265px;
                }
            }
        }
    }
}
@media screen and (max-width: 1199px) {
    #introducing.introducing-2025 {
        & ul {
            grid-template-columns: 1fr;
            gap: 80px;
            margin-bottom: 0;
            li {
                width: 100%;
                display: flex;
                align-items: center;
                padding: 0 40px;
                img {
                    width: 30%;
                }
                .wrap_text {
                    width: 65%;
                    padding-left: 40px;
                    h3 {
                        margin-top: 0;
                        margin-left: 0;
                    }
                    a.btn-common.btn-common-m {
                        padding: 17px;
                    }
                }
            }
            li:nth-child(even) {
                img {
                    order: 2;
                }
                .wrap_text {
                    padding-left: 0;
                    padding-right: 40px;
                    order: 1;
                }
            }
        }
    }
}
@media screen and (max-width: 959px) {
    #introducing.introducing-2025 {
        & ul {
            li {
                padding: 0 20px;
                .wrap_text {
                    a.btn-common.btn-common-m {
                        padding: 15px;
                    }
                }
            }
        }
    }
}
@media screen and (max-width: 767px) {
    #introducing.introducing-2025 {
        & ul {
            li:nth-child(even) {
                padding: initial;
                .wrap_text {
                    padding-right: initial;
                    padding-left: initial;
                }
            }
            li {
                padding: initial;
                display: initial;
                img {
                    width: 100%;
                    order: initial;
                }
                .wrap_text {
                    width: 100%;
                    padding: 0;
                    order: initial;
                    h3 {
                        margin: 30px auto 0;
                    }
                    p {
                        margin: 40px 0 0;
                        max-width: 550px;
                        font-size: 17px;
                        padding: 0 40px;
                    }
                    a.btn-common.btn-common-m {
                        padding: 15px;
                    }
                }
            }
        }
    }
}
@media screen and (max-width: 480px) {
    #introducing.introducing-2025 {
        & ul {
            gap: 60px;
            & li {
                img {
                    max-width: 245px;
                }
                & .wrap_text {
                    h3 {
                        margin: 15px auto 0;
                    }
                    p {
                        margin: 25px 0 0;
                        max-width: 550px;
                        font-size: 16px;
                        padding: 0 20px;
                    }
                }
            }
            li:nth-child(even) {
                padding: 0;
            }
        }
    }
}

/* Enterprise restyle: desaturate the illustrations. */
#introducing.introducing-2025 li img {
    /* filter: grayscale(1); */
}

/* The 27px heading and 17px body ran larger than the other cards, and the heading
   even outsized the 24px section heading above it. Both drop to the shared card
   scale (common-h3-2 / common-p-2). */
#introducing.introducing-2025 ul li .wrap_text {
    h3 {
        font-size: 21px;
        line-height: 1.4;
        letter-spacing: 0.02em;
        margin: 16px auto 0;
    }

    p {
        font-size: 15px;
        line-height: 1.65;
        margin: 12px 0 0;

        /* Lower bound that keeps the three buttons level. 140px was sized for 17px text
           and leaves six lines of space at 15px; this fits the longest body (4 lines). */
        @media screen and (min-width: 1200px) {
            min-height: 99px;
        }
    }

    a {
        margin-top: 28px;
    }
}

/* Rounded white tile behind each illustration. The three range from 1.33 to 1.43
   in aspect and did not read as the same size without a frame. The source images are
   normalised to 940x600 on a 1100x750 canvas, so a fixed-ratio tile with contain
   aligns them including their margins. White, because the section is #f7f7fb. */
#introducing.introducing-2025 ul li img {
    aspect-ratio: 1100 / 750;
    object-fit: contain;
    background: #fff;
    border-radius: 8px;
}

/* Three-column only: widen the tile to the body width so the edges line up.
   Below 1199px the image sits beside the text and needs its own width, so it is
   left alone. */
@media screen and (min-width: 1200px) {
    #introducing.introducing-2025 ul li img {
        width: 100%;
        max-width: none;
    }
}