@media (max-width: 430px) {

    footer {
        gap: 20px;

        div.song-card {
            margin-right: auto;

            div {
                small {
                    max-width: 100px;
                }
            }
        }

    }

}

@media (max-width: 450px) {
    header {
        gap: 15px;
    }
}

@media (max-width: 600px) {
    h1 {
        font-size: 1rem;
    }

    div.scroll-controls {
        gap: 0px !important;
    }

}

@media (max-width: 615px) {

    footer {

        div.right-controls {
            div:nth-child(1) {
                display: none;
            }
        }

        div.song-card {

            div:nth-child(2),
            div:nth-child(3) {
                display: none;
            }
        }
    }

}

@media (min-width: 431px) and (max-width: 700px) {

    footer {

        div.song-card {
            div {
                small {
                    max-width: 200px;
                }
            }
        }

    }

}

@media (max-width: 700px) {

    footer {
        justify-content: space-between;

        div.music-controls {
            width: auto;
        }

        div.song-card {
            width: auto;
        }

        div.right-controls {
            width: auto;
        }

    }

}

@media (max-width: 850px) {
    header {
        div.header-search {
            background: none;
            border: none;
            border-radius: 0;
            padding: 0;
            height: auto;
            gap: 0;
            justify-content: end;
            margin-left: auto;

            img {
                opacity: 100%;
            }
        }

        div.header-user-logo {
            margin-left: 0;
        }
    }


    footer {
        div.right-controls {

            div:nth-child(2),
            div:nth-child(3) {
                display: none;
            }
        }
    }

}

@media (min-width: 851px) {
    header {
        div.header-search {
            p::before {
                content: 'Buscar canciones';
            }
        }
    }
}

@media (max-width: 1040px) {

    footer {
        div.music-controls {
            small {
                display: none;
            }
        }
    }

}

@media (max-width: 1024px) {}

@media (max-width: 1555px) {
    #aside-menu-closed {
        display: block;
        visibility: hidden;
        width: 100%;
        height: 100%;
        position: fixed;
        background-color: rgba(5, 0, 27, 0.664);
        opacity: 0;
        transition: visibility ease-in-out 0.2s, opacity ease-in-out 0.2s;
    }

    #aside-menu-closed.active-aside-menu {
        visibility: visible;
        opacity: 100%;
        z-index: 1;
    }

    aside.menu {
        background-color: rgb(5, 0, 27);
    }
}

@media (max-width: 1391px) {

    main:has(.section-active.home, .section-active.explore) {
        justify-content: left;

        section.home,
        section.explore {
            max-width: none;
            margin-left: 15px;

            div.scroll-controls {
                margin-right: 15px;
            }
        }
    }
}