#cakes,
#flowers,
#chocolates,
#custom {
   display: flex;
   align-items: center;
   justify-content: center;
   flex-direction: column;
}

.container3 {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   padding: 0 0.6rem;
   gap: 0.8rem;
}

.box3 {
   display: flex;
   align-items: center;
   justify-content: space-between;
   flex-direction: column;
}

.cakeimg {
   height: 100%;
   width: 100%;
   border: 2px solid #69b3d6ea;
   border-radius: 15px;
   overflow: hidden;
   margin: 0.5rem;
}

.cakeimg img {
   aspect-ratio: 1/1;
   height: 100%;
   width: 100%;
   object-position: center;
   object-fit: cover;
   transition: 0.3s;
}

.viewbtn {
   outline: none;
   border: none;
   margin-top: 1.2rem;
   background-color: #5da2c2ea;
   padding: 0.6rem 2rem;
   border-radius: 50px;
   display: flex;
   align-items: center;
   justify-content: center;
}

.viewbtn a {
   font-size: 1.2rem;
   color: white;
   font-weight: 700;
}

#flowers {
   .cakeimg {
      border: 2px solid var(--col5);
   }

   .viewbtn {
      background-color: var(--col5);
   }
}

#chocolates {
   .cakeimg {
      border: 2px solid var(--col2);
   }

   .viewbtn {
      background-color: var(--col2);
   }
}

#plants {
   .viewbtn {
      background-color: var(--col3);
   }
}

#custom {
   .cakeimg {
      border: 2px solid var(--col7);
      margin: 0;

   }

   .viewbtn {
      background-color: var(--col7);

      * {
         color: var(--txt-col1);
      }
   }
}

@media screen and (min-width: 768px) {

   /* FOR TABLET*/
   .container3 {
      grid-template-columns: repeat(4, 1fr);
      padding: 0 1.5rem;
      gap: 1rem;
   }
}

@media screen and (min-width: 1200px) {

   /* FOR NORMAL LAPTOP*/
   .container3 {
      padding: 0 2.8rem;
   }

   .cakeimg {
      box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.1);
      transition: all ease 0.3s;
   }

   .cakeimg:hover {
      box-shadow: 0px 15px 20px #7fd5fd7a;
   }

   .box3 {
      transition: 0.3s all ease;
   }

   .box3:hover {
      transform: scale(0.9999) translateY(-5px);
   }

   .box3:hover .cakeimg {
      border: none;
      border-radius: 10px;

      img {
         scale: 1.05;
      }
   }

   .viewbtn {
      box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.1);
      transition: all 0.3s ease 0s;
   }

   .viewbtn:hover {
      background-color: #519ec2ea;
      box-shadow: 0px 15px 20px #5da2c27c;
      transform: translateY(-7px);
   }

   .viewbtn:active {
      transform: translateY(-1px);
   }

   #flowers {
      .cakeimg:hover {
         box-shadow: 0px 15px 20px #fb8da77b;
      }

      .box3:hover .cakeimg {
         border: none; 
      }

      .viewbtn:hover {
         background-color: #f87291;
         box-shadow: 0px 15px 20px #fb8da77b;
      }
   }
   
   #chocolates {
      .cakeimg:hover {
         box-shadow: 0px 15px 20px #ca8e535f;
      }

      .box3:hover .cakeimg {
         border: none; 
      }

      .viewbtn:hover {
         background-color: #c08143;
         box-shadow: 0px 15px 20px #ca8e535f;
      }
   }
   
   #plants {
      .viewbtn:hover {
         background-color: #2ba92f;
         box-shadow: 0px 15px 20px #55e65a92;
      }
   }
   
   #custom {
      .cakeimg:hover {
         box-shadow: 0px 15px 20px #faea5f7c;
      }

      .box3:hover .cakeimg {
         border: none; 
      }

      .viewbtn:hover {
         background-color: #ecda36;
         box-shadow: 0px 15px 20px #faea5f7c;
      }
   }
}

@media screen and (min-width: 1536px) {

   /* FOR EXTRA LARGE LAPTOP*/
   .container3 {
      padding: 0 3.5rem;
   }
}