.catalog-variations {
   display: flex;
   align-items: center;
   position: absolute;
   left: 20px;
   bottom: 240px;

   a:not(.var-last):not(.no-color) {
      display: flex;
      align-items: center;
      border: 1px solid $border-color;
      border-radius: 50%;
      padding: 2px;
      width: 22px;
      height: 22px;
      margin-right: 5px;
      transition: border-color $transition-speed;

      @include haf {
         border-color: $brand-primary;
      }
   }

   a.no-color:not(.var-last) {
      font-size: 12px;
      padding: 1px 5px;
      border: 1px solid $border-color;
      margin-right: 5px;
      border-radius: $border-radius-base;
      color: $black;
      line-height: 1.5;
      background-color: $white;
   }

   .var-last-resp,
   .more-var-resp {
      display: none;
   }


   .colors {
      display: flex;
      justify-content: center;
      border-radius: 50%;
      width: 100%;
      height: 100%;
      overflow: hidden;

      span {
         flex: 1;
      }
   }

   .colors-4 {
      flex-wrap: wrap;

      span {
         flex: 50%;
         height: 50%;
      }
   }

   @media screen and (max-width: $lg - 1) {
      left: 0;
   }

   @media screen and (max-width: $sm - 1) {
      bottom: 180px;
   }

   @media screen and (max-width: $xs - 1) {
      bottom: 170px;
   }

   @media screen and (min-width: $xl) and (max-width: 1369px),
   screen and (min-width: $lg) and (max-width: 1099px),
   screen and (max-width: $sm - 1) {
      a:not(.var-last) {
         &:nth-child(5),
         &:nth-child(6),
         &:nth-child(7),
         &:nth-child(8) {
            display: none;
         }
      }

      a.no-color:not(.var-last) {
         &:nth-child(2) {
            display: none;
         }
      }

      .var-last-resp,
      .more-var-resp {
         display: flex;
      }

      .more-var {
         display: none;
      }
   }
}
