.main{
    margin-bottom: 10em;
}


/* ------------------------------------ seccion 1 -------------------------------------------- */
.section1{
    width: 100%;
    height: 25em;
    overflow: hidden;
    position: relative;
    border-bottom: solid 1em #15151E;

    & img{
        position: absolute;
        top: 50%;
        left: 49.9%;
        transform: translate(-50%, -50%);
        z-index: 2;

        width: 100%;
        filter: brightness(.4);
    }

    div{
        position: absolute;
        z-index: 10;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);   

        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .titulo_circuito{
        color: #fff;
        font-size: 3.8em;
        text-align: center;
    }

    .año_circuito{
        color: #fff;
        font-size: 2.5em;
        letter-spacing: .3em;
    }
}

/* --------------------------------------------------------------------------------------------------- */




/* -------------------------------------------- SECCION 2 -------------------------------------------------- */

.section2{
    margin: 3em 4em 0 3em;
}

.titulo_del_gp{
    font-size: 1.2em;
    margin-bottom: 3em;
}

.contenedor_de_todos_los_detalles{
    position: relative;
    border-top: solid 10px #F20400;
    border-right: solid 10px #F20400;
    border-top-right-radius: 4em;
    padding: 2em 2em 0 0;


    width: 100%;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(22em, 1fr));
    gap: 2em;

    & .bandera_y_nombre{

        position: absolute;
        top: -2em;

        display: flex;
        align-items: center;

        & img{
            width: 5em;
            border-radius: .4em;
            border: 1px solid #15151E;
        }

        p{
            font-size: 25px;
            padding: 0 1em;
        }

        img,p{
            background-color: #fff;
        }
    }

}

.contenedor_img_circuito_detallado{

    & .img_circuito_detallado{
        width: 100%;
    }
}

.detalles{

    & .div_detalles{
        margin-bottom: 1.5em;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 1.5em;

        & .lap_record{
            grid-column: 1/3;
        }
        
        .doble_puntos{
            font-size: 1em;
        }

        .span{
            font-size: 16px;
        }
    }

    .div_detalles div{
        border-bottom: 2px solid #c9c9c9;
        border-right: 2px solid #c9c9c9;
        border-bottom-right-radius: 1em;

        padding: 0 1em 1em 0;
        font-size: 1em;

        transition: all .3s;
    }

    .datos{
        font-size: 2em;
    }

    .otros_enlaces{
        width: 100%;

        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(14em, 1fr));
        gap:  .5em 2em;
        
        & a{
            color: #000;
            border-bottom: 2px solid #c9c9c9;

            font-size: 1.1em;
            min-height: 2.3em;

            display: flex;
            align-items: center;
            gap: 1em;

            transition: all .3s;
        }
    }
}


.div_detalles div:hover{
    border-color: #F20400;
}

.otros_enlaces a:hover{
    border-color: #F20400;
    & p{
        color: #F20400;
    }
}
/* --------------------------------------------------------------------------------------------------- */





@media screen and (max-width: 750px){
    .section1{
        height: 13em;
         
        & .titulo_circuito{
            font-size: 2.8em;
        }

        .año_circuito{
            font-size: 1.5em;
        }
    }

    .section2{
        margin: 1em;

        & .bandera_y_nombre{
            top: -1.3em;
            & p{
                font-size: 19px;
                padding: 0 .5em;
            }

            img{
                width: 3em;
            }
        }

        .contenedor_de_todos_los_detalles{
            border-top-right-radius: 2em;
        }

        .div_detalles{
            gap: .5em;

            & div{
                width: 10em;
            }

            .lap_record{
                width: 21.7em;
            }
        }

        .datos{
            font-size: 1.4em;
        }
    }
}

@media screen and (max-width: 435px) {
    .contenedor_de_todos_los_detalles{
        border: none;
        padding: 2em 0 0 .7em;
    }

    .otros_enlaces{
        width: 92% !important;
    }
}