Arquitectura css - 5 clase

Responsive CSS Banner

@media screen and (min-width: 0){
    .banner__titulo {
        font-size: 3rem;
    }
}

@media screen and (min-width: 768px){
    .banner__titulo {
        font-size: 5.0625rem;
    }
}

@media screen and (min-width: 0){
    .cabecera {
        justify-content: center;
        padding: 0 1rem;
    }
}

@media screen and (min-width: 768px){
    .cabecera {
        justify-content: space-between;
        padding: 0 5rem;
    }
}

@media screen and (min-width: 0){
    .logo {
        display: none;
    }
}

@media screen and (min-width: 768px){
    .logo {
        display: block;
    }
}

@media screen and (min-width: 768px){
    .banner__imagen {
        height: calc(100vh - 72px);
    }
}

@media screen and (min-width: 0){   /*celulares*/
    .persona {
       margin-bottom: 2rem;
    }
 }

 @media screen and (min-width: 768px){  /*tablet*/
    .persona {
        margin-bottom: 0; 
    }
 }

 @media screen and (min-width: 0){   /*celulares*/
    .personas {
       flex-direction: column;
    }
 }

 @media screen and (min-width: 768px){  /*tablet*/
    .personas {
        flex-direction: row; 
    }
 }

@media screen and (min-width: 0){   /*celulares*/
    .receta {
        margin-right: 1rem;
        width: 100%;
    }
}

@media screen and (min-width: 768px){  /*tablet*/
    .receta {
        margin-right: 2.5rem;
        width: calc(33% - 2.5rem);
    }
}

@media screen and (min-width: 922px){    /*pc*/
    .receta {
        margin-right: 5rem;
        width: calc(25% - 5rem);
    }
}

@media screen and (min-width: 0){   /*celulares*/
   .recetas {
      padding: 5rem 0 0 1rem;
   }
}

@media screen and (min-width: 768px){  /*tablet*/
   .recetas {
      padding: 5rem 0 0 2.5rem; 
   }
}

@media screen and (min-width: 922px){    /*pc*/
   .recetas {
      padding: 5rem 0 0 5rem;
   }
}