.image-blocks__container {
  display: flex;
  flex-direction: column;
  gap: var(--box-gap);

  .image-blocks__header {
    display: flex;
    flex-direction: column;
    gap: var(--header-gap, 2rem);
    margin: 0 auto;
    max-width: 55.3rem;
    text-align: center;
    width: 100%;

    .image-blocks__heading {
      font-size: var(--heading-size, 1.4rem);
      font-weight: var(--heading-weight);
      line-height: 1.7;
    }

    .image-blocks__subheading {
      font-size: var(--subheading-size, 1.8rem);
      font-weight: var(--subheading-weight);
      line-height: 1.25;
    }

    .image-blocks__content {
      font-size: var(--content-size, 2rem);
      font-weight: var(--content-weight);
      line-height: 1.6;
    }
  }

  .image-blocks__body {
    display: flex;
    flex-direction: column;
    gap: var(--box-gap);

    .image-blocks__block {
      align-items: center;
      display: flex;
      gap: var(--box-gap);
      justify-content: space-between;
    }

    &.image-blocks__alternate .image-blocks__block:nth-child(odd) {
      flex-direction: row-reverse;
    }

    .image-blocks__image-wrapper {
      max-width: var(--IMW, 44rem);
      width: 100%;

      .image-blocks__image-container {
        border-radius: 1rem;
        position: relative;

        img {
          height: auto;
          width: 100%;
        }

        .image-blocks__card-image {
          left: 0;
          position: absolute;
          top: 3.5rem;
          translate: -50% 0;
          width: 27rem;
        }

        .image-blocks__image {
          border-radius: 1rem;
        }

        &.image-blocks__image-space {
          background: #F5EEE3;
          padding: 3rem;

          .image-blocks__image {
            margin: auto;
            width: revert-layer;
          }
        }
      }
    }

    .image-blocks__context-wrapper {
      display: flex;
      flex-direction: column;
      gap: var(--context-gap, 2rem);
      line-height: 1.8;
      max-width: var(--MAW, 41rem);

      .image-blocks__context-title {
        font-size: var(--title-size, 1.8rem);
        font-weight: var(--title-weight);
        margin-bottom: var(--MB, 0rem);
      }

      .image-blocks__context-content {
        font-size: var(--content-size, 1.6rem);
        font-weight: var(--content-weight);
        line-height: 1.25;
        margin-bottom: var(--MB, 0rem);

        a {
          color: inherit;
        }
      }

      .image-blocks__context-subtitle {
        font-size: var(--subtitle-size, 5.6rem);
        font-weight: var(--subtitle-weight);
        letter-spacing: normal;
        line-height: var(--LH, 1.25);
        margin-bottom: var(--MB, 0rem);
      }

      .image-blocks__context-list {
        display: flex;
        flex-direction: column;
        gap: var(--list-gap, 1.5rem);
        margin-bottom: var(--MB, 0rem);

        .image-blocks__list-item {
          display: flex;
          gap: var(--list-item-gap, 1.5rem);

          .image-blocks__list-item_icon {
            height: 3rem;
            width: 3rem;

            .image-blocks__image {
              height: 100%;
              object-position: center;
              width: auto;
            }
          }
        }
      }
    }

    &.image-blocks__counter {
      counter-reset: count;

      &>.image-blocks__block {
        counter-increment: count
      }

      .image-blocks__context-wrapper::before {
        align-content: center;
        background: #fff;
        border: 1px solid currentColor;
        border-radius: 4em;
        content: counter(count);
        display: flex;
        font-size: var(--counter-size, 3.2rem);
        font-weight: 300;
        height: 1.75em;
        justify-content: center;
        width: 1.75em;
      }
    }

    @media screen and (width < 1024px) {
      .image-blocks__image-wrapper {
        max-width: 30.5rem;
      }

      .image-blocks__context-wrapper {
        max-width: 29rem;
      }

      .image-blocks__block,
      &.image-blocks__alternate .image-blocks__block:nth-child(odd) {
        flex-direction: column;
      }

      .image-blocks__context-title,
      .image-blocks__context-content {
        text-align: center;
      }

      .image-blocks__image-wrapper {
        display: flex;
        justify-content: center;
      }
    }

    @media screen and (width <=768px) {
      .image-blocks__context-title {
        line-height: 1.2;
      }

      .image-blocks__context-content {
        line-height: 1.5;
      }

      .image-blocks__image-wrapper .image-blocks__image-container {
        display: flex;
        flex-direction: column-reverse;

        .image-blocks__card-image {
          left: 0;
          margin: -8rem auto 0;
          position: static;
          top: 0;
          translate: 0;
        }
      }
    }
  }
}