@import url('./estilos.css');

@media only screen and (max-width: 1024px) {

    .mobile-navigation ul li > a {
        font-family: var(--primay-font);
        text-transform: uppercase;
        letter-spacing: 2px;
    }

    .main-container {
        padding: 70px 20px;
        gap: 60px;
    }

    .main-container h2 {
        font-size: 58px;
    }

    /*
    
        Página de inicio

    */

    .fondo-inicio .kt-inside-inner-col {
        min-height: 300px;
        height: 100%;
        border-radius: 12px;
    }

    .fondo-inicio .kt-inside-inner-col::after {
        border-radius: 12px;
    }

    .fondo-inicio h2 {
        opacity: 1;
        z-index: 100;
    }

    /*
    
        Página de Artista
    
    */

    .single-hero h1 {
        font-size: 100px;
        padding: 0 20px;
    }

    .single-hero + .main-container .content {
        flex-direction: column;
    }

    .single-hero + .main-container .content .col-iframes {
        flex-direction: row;
        gap: 20px;
    }

    .single-hero + .main-container .content .col-iframes iframe,
    .single-hero + .main-container .content .col-iframes .youtube-frame {
        flex-basis: 50%;
    }

    .single-hero + .main-container .content .col-iframes .youtube-frame iframe {
        height: 100%;
    }

    .gira-container {
        margin-top: 60px;
    }

    .gira-container p,
    .main-container.conciertos p,
    .main-container .management-container > div div, 
    .main-container .otros-container > div div {
        font-size: 20px;
    }

    .gira-container .concierto-row p,
    .main-container.conciertos .concierto-row p {
        font-size: 16px;
    }

    .concierto-row button {
        font-size: 16px;
    }

    /*
    
        Listado de artistas
    
    */

    .main-container .artistas-container .artista {
        flex-basis: calc((100% / 2) - 9px);
    }

}

@media only screen and (max-width: 768px) {

    .main-container {
        gap: 32px;
    }

    .main-container h2 {
        font-size: 48px;
    }

    /*
    
        Página de Artista

    */

    .single-hero + .main-container {
        padding-top: 120px;
    }

    .single-hero + .main-container .content .col-iframes {
        flex-direction: column;
    }

    .single-hero + .main-container .content .col-iframes iframe,
    .single-hero + .main-container .content .col-iframes .youtube-frame {
        flex-basis: initial;
    }

    .single-hero + .main-container .content .col-iframes .youtube-frame iframe {
        min-height: 352px;
        width: 100%;
    }

    .gira-container p,
    .main-container.conciertos p,
    .main-container .management-container > div div, 
    .main-container .otros-container > div div {
        font-size: 18px;
    }

    .gira-container .concierto-row p {
        font-size: 14px;
    }

    .concierto-row {
        flex-wrap: wrap;
    }
    
    .concierto-row a {
        flex-basis: 100%;
    }

    .concierto-row a button {
        width: 100%;
    }

    .concierto-row p:first-child {
        flex-basis: 100%;
    }

    /*
    
        Listado de artistas
    
    */

    .main-container .artistas-container .artista {
        flex-basis: 100%;
    }

    /*
    
        Página La Agencia

    */

    .artista img, 
    .foto-equipo img {
        width: 100%;
    }
    
    /*
    
        Página de Conciertos

    */

    .conciertos-container {
        gap: 0;
    }

    .conciertos-container:last-child {
        margin-bottom: 0;
    }

    .concierto-row:not(:last-child) {
        margin-bottom: 20px;
    }
}