@media (min-width: 88.75rem) {
    .about__wrapper{
        max-width: 1440px;
    }
    .about__item__name {
        font-size: 7.5rem;
    }
    .about__item__skill {
        font-size: 3rem;
    }
    .about__item__link > a {
        font-size: 2.8rem;
    }
    .contact__mail, .contact__discord {
        font-size: 4rem;
    }
    .contact__social {
        font-size: 3.2rem;
        padding: 10px 66px;
    }
    .work__class,
    .work__genre {
        font-size: 2.6rem;
    }
    .works__viewmore__link {
        font-size: 3.4rem;
    }
    .msg__copy {
        font-size: 3.2rem;
    }
    .bubble:nth-child(2) {
        bottom: 0%;
        right: -3%;
    }
    .bubble:nth-child(3) {
        top: 50%;
        left: -20%;
    }
    .bubble:nth-child(4) {
        top: 0%;
        right: 0%;
    }
    .title {
        font-size: 10.4rem !important;
    }
    .content .about .desc, .content .works .desc, .content .contact .desc {
        font-size: 4rem;
    }

    .page__credit__title, .page__desc__title {
        font-size: 5.6rem;
    }
    .page__about {
        max-width: 1600px;
        grid-column-gap: 45px;
    }
    .page__about p {
        font-size: 2rem;
    }

    .works__genre__button button {
        font-size: 2.2rem;
    }

    .page__credit {
        margin-right: 10rem;
    }
}

@media (min-width: 45rem) and (max-width: 76rem) {
    .about__wrapper {
        flex-direction: column-reverse;
        align-items: center;
        justify-content: center;
    }
    .about__icon {
        margin: 0 0 30px 0;
    }

    .about__item__title, .about__item__title span {
        font-size: 3.6rem
    }
    .about__item__skill{
        font-size: 2.4rem;
    }
    .about__item {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
    .works__wrapper {
        grid-template-columns: repeat(2, 1fr)
    }
    .about__item__link > a,
    .works__viewmore__link {
        font-size: 2.0rem;
    }
    .work__class {
        padding: 7px 16px 6px;
        font-size: 2rem;
    }
    .work__genre {
        font-size: 2rem;
        padding: 6px 16px 4px;
    }
}

@media (max-width: 53.875rem) {
    .work__wrapper {
        margin-top: 10px;
    }
    .works__wrapper {
        margin-top: 6px !important;
        width: 100%;
        grid-template-columns: repeat(1, 1fr)
    }
    .about__wrapper{
        margin-top: 30px;
        display: flex;
        flex-direction: column-reverse;
        width: 100%;
    }
    .about__icon {
        margin: 0 0 30px 0;
    }
    .about__item {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
    .page__credit__title, .page__desc__title {
        margin-bottom: 6px;
    }
    .about__item__title, .about__item__title span {
        text-align: center;
        font-size: 2.5rem;
    }
    .about__item__skill {
        text-align: center;
        font-size: 1.8rem;
    }

    .header{
        padding: 20px 16px
    }
    .header .header__title .logo {
        margin-left: 10px;
        padding-top: 9px;
    }
    .header .header__title .logo img{
        width: 55%;
    }

    .header__title > p {
        display: none;
    }
    .header__nav > ul > li {
        margin-bottom: 2px;
        margin-left: 28px;
    }
    .wrap__icon{
        width: 270px;
        height: 270px;
    }

    .about__item__name {
        font-size: 2.6rem;
    }

    .about__item__link {
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    .about__item__link > a {
        margin-top: 16px;
        text-align: center;
        padding: 8px 80px 6px;

    }
    .works__wrapper {
        margin-top: 25px;
    }
    .works {
        margin-bottom: 40px;
    }
    .work__class {
        padding: 7px 22px;
        font-size: 1.8rem;
    }
    .work__genre {
        padding: 6px 16px 5px;
        font-size: 1.8rem;
    }
    .content .about > h1, .content .works > h1, .content .contact > h1 {
        font-size: 5.2rem;
    }

    .content .about, .content .works, .content .contact {
        padding: 0 16px;
    }
    .content .about .title, .content .works .title, .content .contact .title {
        font-size: 4.2rem;
        line-height: 1;
    }
    .content .about .desc, .content .works .desc, .content .contact .desc {
        align-items: start;
        font-size: 2.2rem;
        /* height: 35px; */
    }
    .content > section {
        margin-top: 20px;
    }
    .header > .header__title p,
    .header a {
        font-size: 1.8rem;
    }
    .header a p{
        margin-left: -30px;
    }
    .content .about .desc::before, .content .works .desc::before, .content .contact .desc::before {
        font-size: 4rem;
        margin-top: -10.2px;
        margin-left: 0px;
    }
    .contact__wrapper {
        margin-top: 40px;
    }
    
    .page__review {
        grid-template-columns: repeat(1,1fr);
    }
    .page__title {
        font-size: 3.4rem;
        padding: .02rem 2rem .30rem 2rem;
    }

    .page {
        margin-top: 30px;
        padding: 0 16px;
    }
    .page__artist {
        font-size: 1.8rem;
    }
    .page__wrapper {
        margin-top: 30px;
    }
    .page__credit__title, .page__desc__title {
        line-height: 1.3;
    }

    .page__about p {
        font-size: 1.4rem;
    }
    .footer {
        margin-top: 70px;
    }
    .page__artist {
        padding: .75rem 2rem .74rem;
    }

    .works__viewmore__link {
        font-size: 2rem;
        padding: 8px 20px;
        border: 2px solid var(--primary-color);
    }
    .works__genre__button {
        margin-right: 6px;
    }
    .works__genre__button button {
        padding: 6px 14px 6px;
        font-size: 1.2rem;
    }
    .works__genre {
        margin-top: 0px;
    }
    
}

@media (max-width: 63.938rem) {
    .page__about {
        display: block;
        margin: 30px auto 60px;
    }
    .page__desc {
        margin-top: 30px;
    }
}

@media (max-width: 32.5rem) {
    .contact__mail, .contact__discord{
        font-size: 2.4rem;
    }
}