@media screen and (min-width:320px) and (max-width:767px) {
    body {
        margin: 24px;
    }

    body img {
        display: none;
    }

    header h2 {
        font-size: 18px;
    }

    nav {
        gap: 7px;
    }

    nav .search-box i {
        font-size: 13px;
    }

    nav .search-box {
        height: 35px;
        padding: 10px;
        border-radius: 40px;
    }

    nav .search-txt {
        font-size: 13px;
        line-height: 35px;
    }

    nav .search-box:hover>.search-txt {
        width: 120px;
        padding: 0;
    }

    nav .light {
        font-size: 15px;
        height: 35px;
        padding: 10px;
    }

    nav .btn-login {
        height: 35px;
        padding: 10px;
        border-radius: 40px;
    }

    nav .btn-login .icon-user {
        display: flex;
        font-size: 15px;
    }

    nav .btn-login p {
        display: none;
    }

    main {
        margin: 20px 0;
    }

    main .first .text p {
        font-size: 16px;
    }

    main .first .text h1 {
        padding-top: 20px;
        min-width: 288px;
        font-size: 32px;
    }

    main .btn-main {
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 14px;
    }

    main .create,
    main .library {
        padding: 10px 20px;
        font-size: 12px;
    }

    article {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: center;
        padding: 30px 25px;
        gap: 3em;
    }

    section h2::before {
        height: 15px;
        width: 3px;
    }

    section h2 {
        font-size: 16px;
    }

    section p {
        font-size: 14px;
        padding-top: 15px;
    }

    footer figure {
        gap: 20px;
    }
}

@media screen and (min-width:768px) and (max-width:1220px) {
    body {
        margin: 45px 5%
    }

    nav .search-box:hover>.search-txt {
        width: 190px;
        padding: 0;
    }
}