.container {
   min-width: 320px;
   /* border: 3px solid red; */
}

.card-container {
   position: relative;
   margin-bottom: 30px;
   /* border: 3px solid blue; */
   display: flex;
   justify-content: center;
}

.card {
   width: 90%;
   height: 750px;
   border-radius: 0.6rem;
   background-color: #f5f4f5;
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   padding: 30px;
   row-gap: 20px;
   position: relative;
}

/**   Fit the cards' text in smaller screens, since the cards
*     are not supposed to change their heights.
*/
@media only screen and (min-width: 1025px) {
   .card {
      height: 470px;
   }
}
@media only screen and (min-width: 768px) and (max-width: 1024px) {
   .card {
      height: 620px;
   }
}
@media only screen and (min-width: 490px) and (max-width: 767px) {
   .card {
      height: 490px;
   }
}

.icon {
   width: 76px;
   height: 76px;
   display: flex;
   justify-content: center;
   align-items: center;
}

.title {
   text-align: center;
   display: block;
   font-size: 20px;
}

.hover-title {
   color: white;
   font-size: 18px;
   font-weight: 600;
   text-align: center;
}

.card-overlay {
   width: 100%;
   height: 100%;
   background-color: #92AF4D;
   position: absolute;
   top: 0;
   left: 0;
   padding: 34px;
   border-radius: 0.6rem;
}

.card-text {
   line-height: 16pt;
   color: white;
   font-size: 16px;
   text-wrap: pretty;
}

.fade {
   transition: all 0.6s ease-in;
   opacity: 0;
}

.card:hover .fade {
   opacity: 1;
}