.filter-cards-editor {
  background-color: #e2e2e2;
  padding: 40px 0;

  h2 {
    font-size: 70px;
    color: #3a266e;
    margin-bottom: 5px;
    justify-self: center;
  }

  .block-content {
    display: grid;

    .filter-control {
      margin: 40px 15px;

      p {
        color: #3a266d;
        font-size: 20px;
        font-weight: 500;
      }

      .filter-block {
        display: flex;
        gap: 7px;
        flex-wrap: wrap;

        .filter-btn {
          border: 3px solid #bcbcbc;
          background: transparent;
          padding: 10px 10px 10px;
          font-family: "BROmny";
          font-weight: 500;
          line-height: normal;
          font-size: 22px;
          color: #8f8f8f;
        }
      }
    }

    .cards-list-editor {
      display: grid;
      grid-template-columns: 50% 50%;
      row-gap: 27px;

      .card-editor {
        margin: 0 15px;
        border: 1px solid #a0a0a0;
        border-radius: 7px;
        padding: 0 15px;
      }
    }
  }
}

.filter-cards {
  background-color: #e2e2e2;
  padding: 40px 0;

  .text-content {
    h2 {
      font-size: 70px;
      font-family: MRCHMaverickGrotesk;
      color: #3a266e;
      margin-bottom: 5px;
      justify-self: center;
    }
  }

  .filter-card-content {
    .filter-control {
      margin-bottom: 40px;

      p {
        color: #3a266d;
        font-family: "BROmny";
        font-size: 20px;
        font-weight: 500;
      }

      .filter-block {
        display: flex;
        gap: 7px;
        flex-wrap: wrap;

        .filter-btn {
          border: 3px solid #bcbcbc;
          background: transparent;
          padding: 10px 10px 7px;
          cursor: pointer;
          font-family: "BROmny";
          font-weight: 500;
          line-height: normal;
          font-size: 22px;
          color: #8f8f8f;
        }

        .filter-btn.active {
          background: #f3742a;
          color: #fff;
          border-color: #f3742a;
        }
      }
    }

    .cards-content {
      .row {
        row-gap: 23px;
      }

      .card-item {
        background: white;
        padding: 25px;

        h3 {
          color: #3a256e;
          font-size: 18px;
          font-weight: 700;
          font-family: "BROmny";
        }

        p {
          color: #525252;
          font-size: 14px;
          font-weight: 500;
          font-family: "BROmny";
        }

        .separator-card {
          width: 100%;
          height: 2px;
          background: #f3742a;
          margin: 15px 0 20px;
        }

        .anchors-card {
          display: grid;
          gap: 10px;

          .email-anchors,
          .phone-anchors {
            display: flex;
            gap: 9px;
            align-items: center;

            a {
              color: #525252;
              font-weight: 600;
              font-size: 14px;
            }
          }
        }
      }
    }
  }
}