.section-coloring-page {
  margin-top: 180px;
  margin-bottom: 60px;

  .coloring-title{
    max-width: min(90%, 315px);
  }

  .col {
    justify-content: center;
    align-items: center;
    gap: 40px;

    .coloring-description {
      max-width: 572px;
      color: #000;
      text-align: center;
      font-size: 18px;
      font-style: normal;
      font-weight: 400;
      line-height: 120%; /* 21.6px */
    }
  }
}

.section-coloring {

  .buttons-wrapper {
    gap: 12px;
  }
}

.section-lessons {
  margin-top: 80px;
  margin-bottom: 80px;

  .lessons-title{
    max-width: 220px;
  }

  .col {
    justify-content: center;
    align-items: center;
    gap: 32px;
  }

  .filters {
    justify-content: center;
    align-items: center;
    gap: 12px;
    margin-bottom: 50px;
  }

  .grid-card-item {
    gap: 12px;
    justify-content: flex-start;
    align-items: center;
  }

  .grid-item-image {
    transition: all 0.3s ease-in-out;

    &:hover {
      transform: scale(1.05);
    }
  }

  .grid-item-title {
    font-weight: 600;
    font-size: 22px;
    line-height: 120%;
    text-align: center;

    a {
      color: #000;
    }
  }

  .grid-item-excerpt {
    font-weight: 400;
    font-size: 16px;
    line-height: 120%;
    text-align: center;
    height: 60px;

    a {
      color: #000;
    }
  }


  .filter-btn.active {
    background: #FFE676;
  }

  .filter-btn.active::before {
    display: none;
  }

  .loading {
    width: 100%;
    font-weight: 400;
    font-size: 16px;
    line-height: 120%;
    text-align: center;
  }

  .lessons-wrapper {
    flex-wrap: wrap;
    justify-content: center;
  }

}

@media (max-width: 992px) {

  .section-coloring-page {
    margin-top: 133px;
  }
  .section-lessons {

    .filters {
      flex-direction: column;
    }
  }
}