@media screen and (max-width:768px) {
    .person {
        flex-direction: column;
        height: 157.33vw;
    }

    .person:nth-of-type(2) .person-detail {
        order: 0;
    }

    .person:nth-of-type(2) .person__img {
        order: 1;
    }

    .person__img,
    .person-detail {
        width: 100%;
    }

    .person-detail__name {
        font-size: 9.33vw;
    }

    .person-detail__intro {
        height: 157.33vw;
        z-index: 1;
        opacity: 0;
    }

    .person-detail__intro p {
        font-size: 3.73vw;
        line-height: 5.33vw;
        width: 80.53vw;
    }

    .close {
        width: 10.13vw;
        height: 10.13vw;
        border-radius: 50%;
        background: black;
        display: block;
        position: absolute;
        top: 15.73vw;
        right: 10.67vw;
    }

    .close::before,
    .close::after {
        content: '';
        width: 70%;
        height: 1.33vw;
        background: white;
        position: absolute;
        left: 50%;
        top: 50%;
    }

    .close::before {
        transform: translate(-50%, -50%) rotate(45deg);
    }

    .close::after {
        transform: translate(-50%, -50%) rotate(-45deg);
    }

    .person-detail:hover .person-detail__intro {
        opacity: 1;
    }
}