/*--- Start mobile Layout -----*/


/*---  The Main Start  -----*/

main{
   
    display: block;
    font-size: 1rem;
    text-align:center;
   
}

main h1{
    font-size: 1.5rem;
    padding-bottom: 0;
    grid-column: 1 / -1;
}
main h1 ~ p{
    text-align: left;
    padding: 0 2rem 2rem ;

}


figure{
    width: 14rem;
    margin: 0 auto;
    /*border: 1px solid red;*/
}

figure p {
    padding-bottom: 0.5em;
    color: #8B0000;
} 

figure img{
    width: 14rem;
}

figcaption{
    text-align:left;
    padding:0.5em 0 2em 0;
    color: #000;
}
/*---  The Main End  -----*/
/*--- End mobile Layout -----*/

/*--- Start Media Query for Tablet Layout -----*/
@media (min-width: 700px) {
 
    main section{
        width: 100%;
        display:grid;
        grid-template-columns: 1fr 1fr 1fr;
    }

    main h1 ~ p{
        grid-column: 1 / -1;
        margin: 0 auto;
    }
    
}
/*--- End Media Query for Tablet Layout -----*/
/*--- Start Media Query for Tablet Layout -----*/
@media (min-width: 1400px) {
 
    main section{
        width: 90%;
     
    }

    main h1 ~ p{
        grid-column: 1 / -1;
        width: 84%;
        margin: 0 auto;
    }
    
}
/*--- End Media Query for Desktop Layout  -----*/