#recipes-container { /* flex box */
   padding: 2rem 2rem 4rem 2rem;
   row-gap: 4rem;
}

/* CSS Text Shadow */
#recipes-container .hero-subtitle {
   color: #3c2010;
   text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
}

/* hgroup */
.animation-title {
   position: relative;
   width: 100%;
}

/* Add animation */
.modal-title {  
  -webkit-animation-name: zoom;
  -webkit-animation-duration: 0.6s;
  animation-name: zoom;
  animation-duration: 0.6s;
}

/* The scale() Method to create the zoom effect.*/
@-webkit-keyframes zoom {
  from {-webkit-transform:scale(0)} 
  to {-webkit-transform:scale(1)} /* defined size */
}

@keyframes zoom {
  from {transform:scale(0)} 
  to {transform:scale(1)} /* defined size */
}

/* aside container cards with recipes */
.container-cardRecipe { /* flex item | flex box */
   justify-content: flex-start;
   column-gap: 1rem;
   row-gap: 4rem;
   width: 100%;
}

.cardRecipe,
.cardRecipe img,
.cardRecipe .cardText { /* flex item */
   flex: 1;
   -webkit-flex: 1;
   -ms-flex: 1;  /* IE 10 */ 
}

/* figure */
.cardRecipe { /* flex item | flex box */
   position: relative;
   border: 1px solid #f1f1e6;
   justify-content: flex-start;
}

/* figcaption */
.cardText { 
   border: none;
   margin: 0; /*  Remove conditions from other figcaptions. */
   padding: 8px;
   text-align: left;
}

.cardTitle {
   width: 100%;
   font: small-caps 400 1.2rem "Raleway", sans-serif;
   text-align: center;
}

.cardPara { /* text */
   margin: 0 0 4rem 0; /* so that the text is not behind the button */
}

/* aside */
.cardText .btnGroup { /* flex box */
   width: 100%;
   padding: 0 8px;
   font: small-caps 400 1rem "Raleway", sans-serif; 
   column-gap: 1rem;
   justify-content: space-between;
   position: absolute;
   bottom: 8px;
   right: 0;
   z-index: 2;
}

.cardButton { /* A button to read more */
   position: absolute;
   bottom: 8px;
   right: 8px;
   font: small-caps 400 1rem "Raleway", sans-serif; 
}

/* btnDotGroup */
.btnDotGroup {
   justify-content: flex-start;
   column-gap: 1rem ;
}

.btnDot { /* A button to change the image */
   font: small-caps 400 1.2rem "Raleway", sans-serif; 
   color: #f1f1e6;
   background-color: #3c2010;
   border-radius: 50%;
   width: 2.5rem;
   height: 2.5rem;
   overflow: hidden;
   cursor: pointer;
}

.active {
   color: #3c2010;
   background-color: #f1f1e6;
}

/* first button */
#seeMore {
   font: small-caps 400 1rem "Raleway", sans-serif; 
}

 /* BREAKPOINTS WITH *//* CSS3 MEDIA QUERIES 
********************************************/
/* BREAKPOINTS WITH *//* CSS3 MEDIA QUERIES 
********************************************/
@media only screen and (max-width: 1004px){
   /* aside */
   .container-cardRecipe { /* flex item | flex box */
      flex-direction: column;
   }

   .cardRecipe {
      flex-flow: row nowrap;
      max-width: 58.75rem;
   }

   /* This is necesary for iPad Pro (10.5 inch) 17.1.2 because flex: 1 has no effect */
   .cardText,
   .photoRecipe {
      width: 50%;
   }

   .cardPara {
      margin: 0 0 2rem 0; /* To create distance behind the button. */
   }

   .cardText .btnGroup {
      width: 50%;
   }
}

@media only screen and (max-width: 800px){
   /* main */
   #recipes-container {
      padding: 1rem 2rem ;
   }

   hr.divide-margin {
      margin: 0 0 5rem 0; /* To create distance behind the button. */
   }
}

@media only screen and (max-width: 599px){
   .cardRecipe {
      flex-flow: column nowrap;
   }
   
   .photoRecipe,
   .cardText{
      width: 100%;
      max-width: 500px;
   }
   
   .cardText {
      text-align: center;
   }

   .cardText .btnGroup {
      width: 100%;
   }
}