/* ===========================================
   LARGE DESKTOP
=========================================== */

@media (min-width: 1600px) {

    #main {
        max-width: 1700px;
        margin-left: 250px;
    }

    .video-grid {
        grid-template-columns: repeat(4, 1fr);
    }

}

/* ===========================================
   LAPTOP
=========================================== */

@media (max-width: 1300px) {

    .video-grid {
        grid-template-columns: repeat(3, 1fr);
    }

}

/* ===========================================
   TABLET
=========================================== */

@media (max-width: 1024px) {

    #sidebar {

        width: 90px;

    }

    #sidebar li span {

        display: none;

    }

    #sidebar li {

        justify-content: center;

    }

    #main {

        margin-left: 90px;

        padding: 90px 20px 30px;

    }

    .search-area {

        width: 55%;

    }

    .hero {

        padding: 40px;

    }

    .hero h1 {

        font-size: 36px;

    }

    .hero p {

        font-size: 16px;

    }

    .video-grid {

        grid-template-columns: repeat(2, 1fr);

    }

}

/* ===========================================
   MOBILE
=========================================== */

@media (max-width: 768px) {

    body {

        padding-bottom: 75px;

    }

    .header {

        padding: 0 12px;

        height: 65px;

    }

    .logo {

        height: 38px;

    }

    #menuBtn {

        display: block;

    }

    .right-header .login-btn {

        display: none;

    }

    .right-header {

        gap: 8px;

    }

    .icon-btn {

        width: 38px;

        height: 38px;

    }

    .voice-btn {

        display: none;

    }

    .search-area {

        width: 100%;

        margin-left: 10px;

    }

    .search-box input {

        height: 42px;

        font-size: 14px;

    }

    .search-box button {

        width: 55px;

    }

    #sidebar {

        position: fixed;

        left: -260px;

        width: 250px;

        transition: .35s;

        z-index: 999;

    }

    #sidebar.active {

        left: 0;

    }

    #sidebar li span {

        display: block;

    }

    #sidebar li {

        justify-content: flex-start;

    }

    #main {

        margin-left: 0;

        padding: 82px 14px 20px;

    }

    .hero {

        padding: 30px 22px;

        border-radius: 20px;

    }

    .hero h1 {

        font-size: 28px;

        line-height: 1.4;

    }

    .hero p {

        font-size: 15px;

    }

    .hero button {

        width: 100%;

    }

    .category-scroll {

        gap: 10px;

    }

    .chip {

        font-size: 13px;

        padding: 10px 18px;

    }

    .section-title {

        font-size: 24px;

    }

    .video-grid {

        grid-template-columns: 1fr;

        gap: 18px;

    }

    .video-card {

        border-radius: 16px;

    }

    .video-info {

        padding: 14px;

    }

    .meta h3 {

        font-size: 16px;

    }

    .meta p {

        font-size: 13px;

    }

    .meta span {

        font-size: 12px;

    }

    .short-card {

        min-width: 170px;

    }

    .short-card img {

        height: 290px;

    }

    footer {

        margin-bottom: 70px;

    }

    .bottom-nav {

        display: flex;

    }

}

/* ===========================================
   SMALL MOBILE
=========================================== */

@media (max-width: 480px) {

    .hero {

        padding: 25px 18px;

    }

    .hero h1 {

        font-size: 23px;

    }

    .hero p {

        font-size: 14px;

    }

    .search-box input {

        font-size: 13px;

    }

    .thumbnail img {

        height: auto;

    }

    .channel-avatar {

        width: 42px;

        height: 42px;

    }

    .meta h3 {

        font-size: 15px;

    }

    .section-title {

        font-size: 20px;

    }

    .chip {

        padding: 8px 16px;

        font-size: 12px;

    }

}