.applications {
  .container {
    h2 {
      font-size: var(--fs-3xl);
      margin-block: 0 32px;
      @media (max-width: 1024px) {
        font-size: 56px;
        letter-spacing: -2px;
        line-height: 90%;
      }
    }
    .text {
      margin-bottom: 48px;
    }
    .applications_items {
      .applications_items_category {
        display: none;

        &:nth-child(1) {
          display: block;
          margin-bottom: 30px;
        }
        .applications_items_rows_wrap {
          @media (max-width: 1024px) {
            display: flex;
            width: auto;
            margin-bottom: 10px;
            margin-left: -20px;
            margin-right: -20px;
            padding-left: 20px;
            padding-right: 20px;
            overflow-x: auto;
            overflow-y: clip;
          }
          &::-webkit-scrollbar {
            display: none;
          }
        }

        h4 {
          visibility: hidden;
          font-family: var(--ff-fibbl);
          color: #c1b4a3;
          margin-block: 0 16px;
          line-height: 80%;
        }

        .applications_items_row {
          display: grid;
          grid-template-columns: 1fr 1fr 1fr;
          gap: 30px;
          transition: all 0.8s ease;
          display: none;
          margin-bottom: 24px;

          @media (max-width: 1024px) {
            display: flex;
            margin-left: 20px;
          }

          &.first {
            display: grid;
            @media (max-width: 1024px) {
              margin-left: 0;
            }
          }

          &:has(figure:nth-child(1):hover) {
            grid-template-columns: 2fr 1fr 1fr;
            @media (max-width: 1024px) {
              grid-template-columns: repeat(3, 278px);
            }
          }

          &:has(figure:nth-child(2):hover) {
            grid-template-columns: 1fr 2fr 1fr;
            @media (max-width: 1024px) {
              grid-template-columns: repeat(3, 278px);
            }
          }

          &:has(figure:nth-child(3):hover) {
            grid-template-columns: 1fr 1fr 2fr;
            @media (max-width: 1024px) {
              grid-template-columns: repeat(3, 278px);
            }
          }

          figure {
            width: 100%;
            transition: all 0.3s ease;
            @media (max-width: 1024px) {
              width: 278px;
            }

            &::after {
              content: '';
              position: absolute;
              top: 0;
              left: 0;
              right: 0;
              bottom: 0;
              width: 100%;
              aspect-ratio: 382/217;
              background-color: #ffd672;
              opacity: 0.12;
              pointer-events: none;
              z-index: 2;
              border-radius: 20px;
              transition: all 0.3 ease;
            }

            &:hover {
              padding-bottom: 114px;
              @media (max-width: 1440px) {
                padding-bottom: 150px;
              }
              @media (max-width: 1024px) {
                padding-bottom: 230px;
              }
              &::after {
                content: '';
                position: absolute;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
                width: 100%;
                aspect-ratio: 382/217;
                background-color: #ffd672;
                opacity: 0;
                pointer-events: none;
                z-index: 2;
                border-radius: 32px;
                transition: all 0.3 ease;
              }
              video,
              img {
                filter: grayscale(0);
                border-color: transparent;
                box-shadow: 1.63px 1.86px 5.58px 0px #0000000d, 6.28px 7.68px 10px 0px #0000000a, 14.19px 17.44px 13.49px 0px #00000008, 25.12px 30.93px 15.82px 0px #00000003, 39.08px 48.38px 17.44px 0px #00000000;
              }
              .text {
                visibility: visible;
                opacity: 1;
                left: 0;
                @media (max-width: 768px) {
                  color: #9b8f82;
                }
              }
            }

            video,
            img {
              width: 100%;
              aspect-ratio: 382/217;
              border-radius: 32px;
              overflow: hidden;
              border: 1px solid var(--c-black);
              transition: all 0.3s ease;
              object-fit: cover;
              box-shadow: 0;
              filter: grayscale(100%);
            }

            figcaption {
              font-size: 30px;
              font-weight: 700;
              font-family: var(--ff-secondary);
            }

            .text {
              transition: all 0.3s ease;
              visibility: hidden;
              opacity: 0;
              height: 54px;
              position: absolute;
              width: 530px;
              left: -10px;
              @media (max-width: 1440px) {
                width: 400px;
                height: 150px;
              }
              @media (max-width: 1024px) {
                width: 278px;
                height: 230px;
              }
            }
          }
        }
      }
    }
  }
  .cta {
    text-align: right;
    @media (max-width: 1024px) {
      text-align: center;
    }
  }
  &.opened {
    .applications_items_category {
      display: block !important;
      h4 {
        visibility: visible !important;
      }

      .applications_items_row {
        display: grid !important;
        @media (max-width: 1024px) {
          display: flex !important;
        }
      }
    }
  }
}