*{
padding:0;
margin:0;
}

:root{
        --espacio:1.5rem;
}

body{
min-height:100vh;
background:url(../img/fondo.jpeg);
background-repeat:no-repeat;
background-position:center center;
background-size:cover;
font-size:20px;
}

header{
width:100vw;
}

.logo{
height:10rem;
width:10rem;
margin-left:var(--espacio);
}

.contenedor0{
display:flex;
flex-direction:row;
justify-content:center;
align-content: center;
flex-wrap: wrap;
gap:1rem;
padding:1rem;
}

.contenedor1{
height:26rem;
width:36rem;
background:url(../img/bg.jpg);
background-repeat:no-repeat;
background-position:center center;
background-size:cover;
border:.1rem solid #fff;
border-radius:1rem;
align-self: center;
}

.contenedor2{
height:26rem;
width:18rem;
border:.1rem solid #fff;
align-self: center;
border-radius:1rem;
box-shadow: 2px 2px 4px 0 rgba(170, 170, 170, 0.3);
display:grid;
place-content:center;
padding:1rem;
}

div p{
color:#fff;
font-family:sans-serif;
text-align:center;
font-size:1.2rem;

}

@media screen and (max-width:800px){
        .contenedor1{
        height:16rem;
        width:26rem;
        }
        
        .contenedor2{
        height:16rem;
        width:16rem;
        }

        .contenedor2 p{
        font-size:.8rem;
        }
}



@media screen and (max-width:550px){
        header{
        height:6rem;
        }
                
        header .logo{
        height:6rem;
        width:6rem;
        }
}



@media screen and (max-width:450px){
        .contenedor1{
        height:10rem;
        width:20rem;
        }
                
        .contenedor2{
        height:11rem;
        width:15rem;
        }
        
        .contenedor2 p{
        font-size:.7rem;
        }

}