section#about {
    margin-top: 0;
    padding: var(--sec-padding5);
    ul.wrap_cards {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        list-style: none;
        column-gap: var(--common-gap2);
        li {
            padding: 60px 25px;
            background-color: var(--main-color-l1);
            border-radius: var(--common-br1);
            h3 {
                text-align: center;
                margin-bottom: 20px;
                min-height: 90px;
            }
            .wrap_img {
                display: flex;
                justify-content: center;
                align-items: center;
                margin: 0 auto;
                img {
                    max-height: 140px;
                    aspect-ratio: 16 / 7;
                    height: auto;
                    object-fit: contain;
                }
            }
        }
    }
}
@media screen and (min-width: 1300px) {
    br.br-show-min1300 {
        display: none;
    }
}
@media screen and (max-width: 959px) {
    section#about {
        ul.wrap_cards {
            grid-template-columns: 1fr;
            row-gap: 30px;
            & li {
                display: grid;
                padding: 40px;
                align-items: center;
                grid-template-columns: 5fr 7fr;
                column-gap: 20px;
                h3 {
                    font-size: clamp(19px, 2.5vw, 21px);
                    order: 2;
                    text-align: initial;
                    margin-bottom: initial;
                    min-height: initial;
                }
                .wrap_img {
                    order: 1;
                    img {
                        max-height: 120px;
                        aspect-ratio: 16 / 7;
                    }
                }
            }
        }
    }
}
@media screen and (max-width: 767px) {
    section#about {
        & ul.wrap_cards {
            row-gap: 25px;
            & li {
                padding: 35px;
                grid-template-columns: 4fr 9fr;
                h3 {
                    font-size: 18px;
                }
                & .wrap_img {
                    img {
                        aspect-ratio: 16 / 10;
                    }
                }
            }
        }
    }
}
@media screen and (max-width: 480px) {
    section#about {
        & ul.wrap_cards {
            row-gap: 20px;
            & li {
                grid-template-columns: 4fr 10fr;
                padding: 30px 25px;
                h3 {
                    font-size: clamp(15px, 3.5vw, 16px);
                }
            }
        }
    }
}
