.home-section {
   position: relative;

   @media (min-width: 768px) {
      width: 33.33333%;
   }

   @media (max-width: 767px) {
      display: block;
   }


   h3 {
      font-size: 30px;
      letter-spacing: 0;

      strong {
         font-size: 38px;
         font-weight: 700;
      }
   }

   li {
      border-right: 2px solid $border-color;
      font-size: 16px;
      line-height: 20px; // vyska borderu
      margin-top: 4px;
      padding: 0 10px;
      text-transform: uppercase;

      &:last-child {
         border-right: 0;
      }

      @media screen and (max-width: 410px) {
         font-size: 15px;
         padding: 0 7px;
      }
   }

   i {
      color: $gender-female;
      font-size: 70px;
   }

   &--2 i {
      color: $gender-male;
   }

   &--4 i {
      color: $gender-child;
   }

   @media screen and (max-width: 600px) {
      h3 {
         display: inline-block;
         font-size: 24px;

         strong {
            font-size: 34px;
         }
      }

      i {
         display: inline-block;
         font-size: 55px;
         margin-right: 10px;
         margin-bottom: -10px;
      }
   }
}

.home-section--campaign {
   position: relative;
   text-align: left;

   &.home-section { padding: 0; } // specificity override

   > div {
      padding: 20px;

      &:last-child {
         border-top: 1px solid $border-light;
         clear: left;
      }
   }

   .gender-female {
      color: $gender-female;
   }

   .gender-male {
      color: $gender-male;
   }

   p {
      font-family: $font-bernino;
      font-size: 18px;
      margin-bottom: 9px;
      padding-left: 10px; // vyrovna se s btn
      text-transform: uppercase;
   }

   .icon {
      font-size: 50px;
      padding-right: 20px;

      &::before {
         width: 1em;
      }

      @media screen and (max-width: 380px) {
         font-size: 36px;
         padding: 0;
      }
   }

   a {
      font-size: 16px;
      text-transform: uppercase;
      padding: 0 10px;
      line-height: 20px; // vyska borderu
      margin-top: 4px;
      display: inline-block; //nezalamuje se
      border-right: 2px solid $border-color;

      &:last-child {
         border-right: 0;
      }

      @media screen and (max-width: 410px) {
         font-size: 15px;
         padding: 0 7px;
      }
   }

   @media screen and (min-width: 992px) and (max-width: 1199px) {
      a {
         font-size: 14px;
      }

      p {
         font-size: 16px;
      }

      .icon {
         font-size: 40px;
         padding-right: 15px;
      }
   }

   @media screen and (max-width: 991px) and (min-width: 768px) {
      .icon { display: none; }

      p {
         padding: 0;
      }

      > div {
         padding: 20px 10px;
         text-align: center;
      }
   }

   @media screen and (max-width: 767px) {
      > div {
         padding: 30px;
      }
   }

   @media screen and (max-width: 340px) {
      text-align: center;

      .flg-img {
         display: none;
      }
   }
}
