.interventions-list {
  display: flex;
  align-items: center;
  flex-direction: column;

  & .interventions-list__breadcrumbs {
    align-self: flex-start;
    margin-bottom: 20px;
    padding: 0;
  }

  & .interventions-list__wrapper {
    width: 100%;
  }

  & .interventions-list__head {
    margin-bottom: 32px;

    & h2 {
      margin: 0;
      margin-bottom: 16px;
      font-size: 48px;
      line-height: 60px;
      font-weight: 500;
      text-align: center;
    }

    & p {
      margin: 0;
      font-size: 20px;
      line-height: 26px;
      text-align: center;
      max-width: 780px;
    }
  }

  & .interventions-list__items {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-column-gap: 24px;
    grid-row-gap: 40px;
    margin: 0;
    padding: 0;
    list-style: none;

    @media screen and (max-width: 990px) {
      grid-template-columns: repeat(2, 1fr);
    }

    @media screen and (max-width: 560px) {
      grid-template-columns: repeat(1, 1fr);
    }
  }

  & .pagination {
    text-align: center;
    margin-top: 24px;
  }
}

.center-products-columns-auto {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  margin-top: 24px;

  & .session-card {
      display: flex;
      flex-wrap: wrap;
      justify-content: start;
      overflow: visible;
      padding: 24px;
      height: 100%;
      gap: 24px;
      border: none;
      box-shadow: 0 0 2px var(--COLOR-BORDER-OPACITY-024), 0 12px 24px var(--COLOR-BORDER-OPACITY-024);

      & .session-card__image__wrapper {
          /* height: 280px; */
          padding: 0;
          overflow: hidden;

          & img {
              object-position: top;
              border-radius: 8px;
          }
      }

      & .session-card__content {
          min-width: 262px;
          padding: 0;

          & >*:first-child {
              margin-top: 0;
          }

          & .session-card__actions {
              max-width: 484px;
          }
      }
  }

  & .card {
      flex: 1 600px;
  }
}

.center-products-columns-auto.w33-cards {
  & .card {
      max-width: calc((100% - 24px * 2) / 3);
      
      @media screen and (max-width: 1224px) {
          max-width: calc((100% - 24px) / 2);
      }
      @media screen and (max-width: 690px) {
          max-width: 100%;
      }
  }
}