:root {
   --primary: #7eb628;
}

.main__container {
   background: #e4e4e4;
}

.home-title {
   text-transform: uppercase;
   font-weight: bold;
   font-size: 20px;
}

.hm-title {
   text-transform: uppercase;
   font-weight: bold;
   font-size: 20px;
   color: var(--primary);
}

.featured-prods {
   display: flex;
   flex-flow: column;
   justify-content: center;
   align-items: center;
   text-align: center;
   margin: 2rem 0;
}

.prods__recommend {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   gap: 2rem;
}

.recommended {
   display: flex;
   flex-flow: column;
   justify-content: start;
   align-items: end;
   background: #fff;
   padding: 2rem;
}

.recommended__container {
   display: grid;
   grid-template-columns: 1fr 0.25fr;
   margin-bottom: 1rem;
}

.recommended img {
   width: 10rem;
   height: 10rem;
}

.recommended__title {
   background: #7eb628;
   color: #fff;
   width: 15rem;
   border-radius: 15px;
   padding: 0.5rem;
}

.old__recomm {
   text-decoration: line-through;
}

.cart__btn {
   width: 100%;
   display: flex;
   justify-content: center;
   align-items: end;
   margin-bottom: 0.25rem;
}

.add_to_cart {
   --size: 2.5rem;
   height: var(--size);
   width: var(--size);
   color: #fff;
   background: #000;
   border-radius: 9999px;
}

.our-brands {
   display: flex;
   justify-content: center;
   align-items: center;
   text-align: center;
   gap: 0.5rem;
}

.brands-imgs {
   display: flex;
   flex-flow: column;
   justify-content: center;
   align-items: center;
   text-align: center;
   gap: 1rem;
   margin: 2rem 3rem;
}

.brands-imgs img {
   width: 100%;
   height: auto;
}

.explore {
   display: flex;
   flex-flow: column;
   justify-content: center;
   align-items: center;
   text-align: center;
   margin: 2rem 0;
}

.explore-title {
   width: 100%;
   display: flex;
   justify-content: center;
   align-items: center;
   text-align: center;
}

.explore-sections {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   justify-content: center;
   align-items: center;
   width: auto;
   height: auto;
   margin-left: 3rem;
   margin-right: 3rem;
   gap: 1rem;
}

.explore-sections img {
   width: 100%;
   height: 100%;
}

.section-one {
   width: 100%;
   height: 85%;
}

.section-two {
   display: grid;
   grid-template-rows: repeat(2, 1fr);
   justify-content: center;
   align-items: start;
   width: 100%;
}

.div-sections {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   justify-content: center;
   align-items: start;
   gap: 1rem;
}

.reps-section {
   display: flex;
   justify-content: center;
   align-items: end;
   height: 100%;
}

@media (max-width: 1388px) {
   .prods__recommend {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 2rem;
   }
}

@media (max-width: 720px) {
   .prods__recommend {
      display: grid;
      grid-template-columns: repeat(1, 1fr);
      gap: 2rem;
   }
}