body{
    background: linear-gradient(rgba(0,0,0,0.7), rgba(0,0,0,0.7)),url(https://i.postimg.cc/CxF187hd/filas-asientos-rojos-teatro.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    color: white;
}

.father{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(auto, 1fr);
    grid-gap: 10px;
}


div{
    margin: 5px;
}


.father .title{
    grid-column: 1 / span 3;
    grid-row: 1;
    text-align: center;
    font-family:Verdana, Geneva, Tahoma, sans-serif;
    font-weight:bold;
    text-decoration: underline;
    color: red;
    background-color: white;
    border-radius: 5px;
}

.father .title h1{
    font-size: 1.5rem;
}

.father .content{
    grid-column: 1;
    grid-row: 2;

    box-shadow: 2px 3px 4px 5px gray;
    padding: 5px;


}

.father .content h3{
    text-transform: uppercase;
    font-family: fantasy;
    color:white;
    font-weight: 400;
    text-align: center;
}

.father .content p{
    text-transform: lowercase;
    color: yellow;
    font-size: 0.9rem;
}

.father .img-muestra{
    grid-column: 2 / span 3;
    grid-row: 2;

    box-shadow: 2px 3px 4px 5px gray;
    padding: 5px;
}

.father .img-muestra img{
    max-width: 100%;

    max-height: 100%;
}

.father .img-muestra .descargar{
    display: block;
    text-align: center;
}

.father .img-muestra .descargar li{
    display: inline-block;
    text-align: center;
    background-color: red;
    margin: 10px;
    padding: 5px;
    border-radius: 5px;
}

.father .img-muestra .descargar li a{
    text-decoration: none;
    color: white;
}



.father .video-muestra{
    grid-column: 2;
    grid-row: 3;
    text-align: center;
    box-shadow: 2px 3px 4px 5px gray;
    padding: 5px;
}

.father .video-muestra h2{
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    text-decoration: underline;
}

.father .video-muestra video{
    max-width: 100%;
    max-height: 100%;
}

.father .footer{
    grid-column: 1 / span 3;
    grid-row: 4;
    text-align: center;
}

.father .footer p{
    font-size: 0.6rem;
    color: white;
    font-family: Arial, Helvetica, sans-serif;
}


/*Estilos para pantallas pequeñas*/
@media screen and (max-width: 767px){
    .father{
        display: block;
    }
    .father .title{
        grid-column: initial;
        grid-row: initial;
        text-align: center;
        font-size: 1.2rem;
    }
    .father .content{
        grid-column: initial;
        grid-row: initial;
    }
    .father .img-muestra{
        grid-column: initial;
        grid-row: initial;
        margin-top: 10px;
    }
    .father .img-muestra img{
        width: 100%;
        height: auto;
    }
    .father .img-muestra .descargar li{
        margin: 5px;
        padding: 3px;
    }
    .father .video-muestra{
        grid-row: initial;
        margin-top: 10px;
    }
    .father .video-muestra video{
        width: 100%;
        height: auto;
    }

    
}

/*Estilos para pantallas medianas*/
@media screen and (min-width: 768px) and (max-width: 1023px){
    .father{
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: auto;
    }
    .father .title{
        font-size: 1.8rem;
    }

    
}

/*Estilos para pantallas grandes*/
@media screen and (min-width: 1024px){
    .father{
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: auto;
    }
}