body{
    background-color: #F6F4F0;
}

.main{
    background-color: #fff;
    margin: 4em 4em 10em 3em;
}

.titulo_del_equipo{
    color: black;
    background-color: #F6F4F0;
    font-size: 2.6em;
    padding-bottom: .5em;
}

.contenedor_de_sectores{
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(615px, 1fr));
    row-gap: 2em;
    padding: 3em;
}





.sector1{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1em;

    & .logo_equipo{
        grid-column: 1/3;

        & img{
            width: 17em;
        }
    }

    .estadistica{
        font-size: 14px;
    }

    .valor_estadistica{
        font-size: 17px;
    }
}

.sector2{
    gap: .3em;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));


    & .piloto1, 
    .piloto2{
        overflow: hidden;
        display: flex;
        flex-direction: column;
    }

    .datos_piloto{
        position: relative;
        z-index: 10;

        height: 100%;
        padding: 1em 1em 1em 4em;
        
        background-color: #fff;
        color: #000;

        display: flex;
        flex-direction: column;
        justify-content: center;


        & .numero{
            font-size: 2.6em;
        }

        .nombre{
            font-size: 1.1em;
        }

        .nombre_del_equipo{
            color: #333336;
        }
    }
    
    img{
        align-self: center;
        width: 25em;
        transition: all .2s;
    }
}


.sector2 a:hover {    
    & img{
        transform: scale(1.05);
    }

    .datos_piloto{
        background-color: #000;

    }

    .numero,
    .nombre,
    .nombre_del_equipo{
        color: #fff;
    }
}




.galeria{
    position: relative;
    width: 100%;

    & img{
        width: 100%;
    }

    .flecha_izq,
    .flecha_der{
        position: absolute;
        z-index: 10;
        bottom: 2em;

        padding: .5em;
        font-size: 2em;

        cursor: pointer;
        
        background-color: black;
        filter: opacity(.4);
        color: #fff;
        border: none;

        transition: all .2s;
    }

    .flecha_izq{
        right: 1.6em;
    }
    .flecha_der{
        right: 0;
    }

    .contador_fotos{
        display: flex;
        font-size: 1.2em;

        color: #747474;
        border-top: solid 7px #F20400;
        border-bottom: #d9d9d9 solid 2px;

        gap: 1em;
        padding: .5em;

        & img{
            width: 1.5em;
        }
    }

    .flecha_der:hover,
    .flecha_izq:hover{
        filter: opacity(.8);
    }
}




@media screen and (max-width: 915px){
    .main{
        margin: 2em;
    }
    .contenedor_de_sectores{
        padding: .5em;
    }

    .sector2{
        display: flex;
        flex-direction: column;

        & .datos_piloto{
            align-items: center;
        }
    }
}

@media screen and (max-width: 750px){
    .sector1{
        grid-template-columns: 1fr;
        padding-left: 2em;
        max-width: 296px;


        & .logo_equipo{
            grid-column: 1/2;
        }
    }

    .sector2{
        max-width: 296px;
        gap: 3em;
        margin-left: .4em;
        margin-bottom: 3em;
        padding-left: 1.5em;


        & img, .datos_piloto{
            width: 300px;
        }

        .datos_piloto{
            padding-left: 0;
            align-self: center;
        }
    }
}

@media screen and (max-width: 412px){
    .flecha_der,
    .flecha_izq{
        font-size: 1em;
        padding: 0;        
    }

}