.portfolio {
   &__container {
   }

   &__body {
   }

   &__images {
      display: flex;
      @media (max-width: $mobile) {
         flex-direction: column;
      }
   }

   &__row {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      //flex: 1 1 33.3333%;
      &:not(:last-child) {
         margin-right: 56px;
      }
      &:first-child{
         flex-basis: 32.157%;
         .portfolio__item{
            &:first-child{
               .portfolio__img{
                  padding-bottom:115.095%;
                  @media (max-width: $mobile) {
                  padding-bottom: unset;
                  }
               }
            }
            &:nth-child(2), &:nth-child(3){
               .portfolio__img{
                  padding-bottom: 83.705%;
                  @media (max-width: $mobile) {
                     padding-bottom: unset;
                     }
               }
            }
         }
      }
      &:nth-child(2){
         flex-basis: 28.935%;
         .portfolio__item{
            &:first-child, &:nth-child(2){
               max-height: 455px;
               .portfolio__img{
                  padding-bottom: 93.025%;
                  @media (max-width: $mobile) {
                     padding-bottom: unset;
                     }
               }
            }
            &:nth-child(2){
              // margin-top: -78px;
            }
            &:nth-child(3){
               .portfolio__img{
                  padding-bottom: 127.91%;
                  @media (max-width: $mobile) {
                     padding-bottom: unset;
                     }
               }
            }
         }
      }
      &:last-child{
         flex-basis: 35%;
         .portfolio__item{
            &:first-child, &:nth-child(3){
               .portfolio__img{
                  padding-bottom: 76.905%;
                  @media (max-width: $mobile) {
                     padding-bottom: unset;
                     }
               }
            }
            &:nth-child(2){
               .portfolio__img{
                  padding-bottom: 105.742%;
                  @media (max-width: $mobile) {
                     padding-bottom: unset;
                     }
               }
            }
         }
      }
      @media (max-width: $tablet) {
        // flex: 1 1 0%;
      }
      @media (max-width: $mobile) {
         &:not(:last-child) {
            margin-right: 0px;
            flex: 1 1 0%;
         }
      }

   }

   &__item {
      @media (max-width: $mobile) {
         margin-bottom: 30px;
      }
   }

   &__img {
      margin-bottom: 30px;
      position: relative;
    //  cursor: pointer;
      img {
         position: absolute;
         top: 0;
         left: 0;
         height: 100%;
         width: 100%;
         object-fit: fill;
   }
   @media (max-width: $mobile) {
      margin-bottom: 15px;
      img{
         position: relative;
      }
   }
    /*  .loading {
         position: absolute;
         width: 100%;
         height: 100%;
         top: 0;
         left: 0;
         display: flex;
         align-items: center;
         justify-content: center;
         z-index: 5;
      }
     
      .ball {
         width: 44px;
         height: 44px;
         border-radius: 50%;
         &:not(:last-child){
            margin-right: 20px;
         }
         animation: 2s bounce ease infinite;
      }
      .blue {
         background-color: #4285f5;
      }
      .red {
         background-color: #ea4436;
         animation-delay: .25s;
      }
      .yellow {
         background-color: #fbbd06;
         animation-delay: .5s;
      }
      .green {
         background-color: #34a952;
         animation-delay: .75s;
      }
      @keyframes bounce {
         50%{
            transform: translateY(25px);
         }
      }*/
   }

   &__link {
      margin-bottom: 60px;
      @include adaptiveValueREM(" margin-bottom", 60, 20, 1920, 992, 1);
      p {
         font-family: "Muller";
         @include adaptiveValueREM("font-size", 25, 18);
         font-weight: 300;
         line-height: 1;
         color: $mainColor;
      }
   }
}

.portfolio-description {
   box-sizing: content-box;
   position: relative;
   &:hover {
      .portfolio-description__body {
         opacity: 0.9;
         visibility: visible;
         /* transform: translate(0%, 0);*/
         width: 100%;
      }
   }
   &__body {
      cursor: auto;
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: $darckColor;
      opacity: 0.9;
      font-family: "Muler";
      color: #ffffff;
      display: grid;
      grid-template-rows: auto 1fr;
      align-items: center;
      text-align: center;
      transition: all 0.5s ease 0s;
      opacity: 0;
      visibility: hidden;
      //transform: translate(-100%, 0);
      width: 0;
   }
   &__tittle {
      margin-top: 10%;
      margin-bottom: 20px;
      font-weight: 700;
      font-size: rem(18);
      p {
         &:not(:last-child) {
            margin-bottom: 10px;
         }
         &:nth-child(2) {
            @include adaptiveValueREM("font-size", 24, 18);
         }
      }
   }
   &__list {
      margin-top: -10%;
   }
   &__item {
      @include adaptiveValueREM("font-size", 20, 16);
      &:not(:last-child) {
         margin-bottom: 10px;
      }
   }
}
