.menu {
    display: none;
}

/* xl */
@media (max-width: 1160px) {
    .card__ {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 1rem;
    }
}

@media (max-width: 920px) {
    .card__ {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 1rem;
    }
}

@media (max-width: 680px) {
    .card__ {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
    }
}

/* lg */
@media (max-width: 960px) {
    .ques {
        width: 75%;
    }

    #hero h1 {
        font-size: 2rem;
        letter-spacing: 0rem;

    }

    #hero p {
        font-size: 1.125rem;
        letter-spacing: 0rem;
    }

    .search-btn {
        width: 60%;
        padding: 8px 16px;
    }

    .nav-items,
    .nav-btn {
        display: none;
    }

    .menu {
        display: block;
        fill: var(--primary-color);
        width: 32px;
    }

    .menu:hover {
        cursor: pointer;
    }

    .content h1 {
        font-size: 2.5rem;
    }
}

/* md */
@media (max-width: 640px) {
    .ques {
        width: 80%;
    }

    .cursor {
        display: none;
    }

    body {
        cursor: inherit;
    }

    #hero h1 {
        font-size: 1.75rem;
        font-weight: 500;
        letter-spacing: 0rem;
    }

    #hero p {
        font-size: 1rem;
        letter-spacing: 0rem;
    }

    .search-btn {
        width: 70%;
        padding: 6px 12px;
    }

    /* placeholder font change */
    .search-btn .search-box::placeholder {
        font-size: 1.25rem;
    }

    .search-btn svg {
        width: 28px;
    }

    .nav-bar {
        padding-left: 12px;
        padding-right: 12px;
    }
}

/* xs */
@media (max-width: 475px) {
    .ques {
        width: 90%;
    }

    .content h1 {
        font-size: 2rem;
    }

    .anime__card {
        width: 168px;
        height: 240px;
        padding: 4px;
        border-radius: 10px;
    }

    .anime__card img {
        width: 160px;
        height: 150px;
    }

    #hero h1 {
        font-size: 1.5rem;
        font-weight: 500;
        letter-spacing: 0rem;
    }

    #hero p {
        font-size: 0.9rem;
        letter-spacing: 0rem;
    }

    .search-btn {
        width: 70%;
        padding: 6px 12px;
    }

    #hero .caro .carousel img {
        height: 150px;
        padding-right: 16px;
    }

    #hero .cover-img {
        width: 100%;
        height: 30px;
        transform: translateY(45px);
    }

    #hero .y {
        transform: translateY(196px);
    }
}