.single-inspiration {
  .text-content {
    * {
      @extend .has-xl-font-size;
    }
  }

  .popup,
  .popup-opener {
    @apply
      hidden;
  }

  .renders {
    @apply
      max-w-5xl
      mx-auto
      my-15;

    img {
      @apply
        hidden
        object-contain
        object-center
        first:inline-block;
    }
  }

  .focus {
    @apply
      bg-primary-50
      my-20
      py-15;

    h2 {
      @extend .has-alt-xl-font-size;
      @apply
        uppercase
        mb-15
        text-center;
    }

    h3 {
      @extend .has-base-font-size;
      @apply
        font-mono
        border-t
        border-primary-250
        pt-3;
    }

    .inner {
      @apply
        grid
        max-w-[670px]
        grid-cols-2
        mb-4
        mx-auto
        relative
        bottom-4
        justify-start
        gap-8;

      .single {
        @apply
          w-full
          transition-all

          hover:opacity-50;

        p {
          @extend .has-base-font-size;
        }

        figure {
          @apply
            mb-2.5;
        }
      }
    }
  }

  .filter-inspiration {
    @apply
      flex
      flex-col
      px-4.5
      py-3.5
      border
      max-w-[430px]
      justify-between
      mx-auto
      fixed
      bottom-[9999px]
      left-0
      right-0
      z-[9999]
      rounded-t-[30px]
      bg-white
      border-primary-100

      sm:rounded-t-[30px]

      lg:max-w-screen-xl
      lg:bottom-0
      lg:rounded-md
      lg:flex-row;

    box-shadow: 0 0 50px -12px rgba(0, 0, 0, 0.25);

    &.active {
      .choose-decors {
        &.mobile {
          @apply
            mb-2;

          svg {
            @apply
              rotate-180;
          }

          p {
            @apply
              opacity-0;
          }
        }
      }
    }

    .choose-decors {
      &.mobile {
        @apply
          inline-block
          transition-all
          mb-8
          text-center

          lg:hidden;

        svg {
          @apply
            mx-auto
            mb-3;
        }

        p {
          @extend .has-lg-font-size;
          @apply
            transition-all;
        }
      }
    }

    .filter {
      @apply
        w-full
        last:pr-0
        last:border-r-0
        border-primary-100
        max-w-xs
        mx-auto

        lg:mx-0
        lg:max-w-[unset]
        lg:last:mr-0
        lg:pr-6
        lg:mr-4.5
        lg:border-r;
    }

    h3 {
      @extend .has-xs-font-size;
      @apply
        font-mono
        mb-2;
    }

    .inner {
      @apply
        justify-start
        gap-6
        mb-5
        grid
        grid-cols-2

        lg:mb-0
        lg:flex;

      .single {
        @apply
          cursor-pointer
          transition-all
          flex;

        * {
          @apply
            transition-all;
        }

        &:hover {
          figure {
            img {
              @apply
                opacity-50;
            }
          }

          p {
            @apply
              opacity-50;
          }
        }

        &[data-active] {
          figure {
            .filter-active {
              @apply
                opacity-100;
            }

            img {
              @apply
                opacity-50;
            }
          }

          p {
            @apply
              opacity-50;
          }
        }

        figure {
          @apply
            mb-0
            relative
            max-w-[75px];

          .filter-active {
            @apply
              absolute
              w-[15px]
              h-auto
              opacity-0
              pointer-events-none
              transition-all
              left-[2px]
              top-[2px];
          }
        }

        p {
          @extend .has-xs-font-size;
          @apply
            max-w-[80px]
            ml-2;
        }
      }
    }
  }
}
