#intro > .flex {
    column-gap: 4rem;
    row-gap: 3rem;
}

#intro .img-wrap {
    width: 40%;
    gap: 2rem;
}

#intro .text-content {
    width: 60%;
}

#intro strong br {
    display: none;
}

#features li {
    column-gap: 3rem;
    position: relative;
}

#features li:nth-child(n + 2) {
    margin-top: 4rem;
}

#features .sakura {
    top: -1rem;
    left: -1rem;
}

#features img.radius {
    width: 40%;
}

#features .text-content {
    width: 60%;
}

#features h3 {
    border-bottom: 1px solid var(--c-font);
    margin-bottom: 1rem;
    padding-bottom: .2em;
}

#message .flex {
    gap: 4rem;
}

#message img {
    width: 40%;
    border-radius: 50%;
    border: 10px solid var(--c-sub);
}

#message .text-content {
    width: 60%;
}

#message strong {
    margin-bottom: 2rem;
}

#message .reason {
    background-color: var(--c-sub);
    padding: 1rem;
    margin-bottom: 1rem;
}

#message .name {
    text-align: end;
    margin-top: .5rem;
}

@media screen and (max-width:992px) {
    #intro .img-wrap {
       width: 100%;
       flex-direction: row;
       justify-content: space-between;
       gap: 0;
    }

    #intro .img-wrap img {
        width: 48.5%;
    }

    #intro .text-content {
        width: 100%;
    }

    #features li {
        padding-block: 2rem;
    }

    #features img.radius {
        width: 100%;
        margin-bottom: 1.5rem;
    }

    #features .text-content {
        width: 100%;
    }

    #message img {
        width: 60%;
    }

    #message .text-content {
        width: 100%;
    }
}

@media screen and (max-width:420px) {
    #intro strong br {
        display: block;
    }
}