.image-cards {
  .image-cards__list {
    display: flex;
    flex-direction: column;
    gap: 10.1rem;

    @media screen and (max-width: 990px) {
      gap: 4rem;
    }

    .card-block {
      display: flex;
      border-radius: 3rem;
      overflow: hidden;
      align-items: stretch;

      @media screen and (max-width: 990px) {
        border-radius: 1.8rem;
      }
      
      &.revert {
        flex-direction: row-reverse;

        @media screen and (max-width: 990px) {
          flex-direction: column-reverse;
        }
      }

      @media screen and (max-width: 990px) {
        flex-direction: column-reverse;
      }

      .card-block__image {
        flex: 1;

        img {
          width: 100%;
          height: 100%;
          object-fit: cover;
          object-position: center;
        }
      }

      .card-block__content {
        flex: 1;
        display: flex;
        align-items: center;
        
        .content-wrapper {
          padding: 7rem;

          @media screen and (max-width: 1280px) {
            padding: 3.6rem;
          }

          @media screen and (max-width: 990px) {
            padding: 3.5rem 2.4rem 4.2rem;
          }
        }

        .card-block__badge {
          margin-bottom: 2.6rem;
          display: flex;
          font-weight: 500;
          font-size: 17px;
          color: #000;
          padding: 1.4rem 2.4rem;
          background: #fff;
          border-radius: 2rem;
          width: fit-content;
          line-height: 2.1rem;

          @media screen and (max-width: 990px) {
            margin-bottom: 1.7rem;
          }
        }

        .card-block__title {
          margin-bottom: 2.6rem;
          font-weight: 600;
          font-size: 4.8rem;
          line-height: 5.9rem;

          @media screen and (max-width: 990px) {
            line-height: 3.4rem;
            font-size: 2.8rem;
          }
        }

        .card-block__description {
          color: #656565;

          p {
            font-weight: 500;
            font-size: 1.8rem;
            line-height: 140%;

            @media screen and (max-width: 990px) {
              font-size: 1.6rem;
            }
          }

          ul {
            display: flex;
            flex-direction: column;
            gap: 1.3rem;
            margin-top: 4.6rem;

            @media screen and (max-width: 990px) {
              gap: 0.8rem;
              margin-top: 2.6rem;
            }
          }

          li {
            font-weight: 500;
            font-size: 1.8rem;
            line-height: 140%;
            position: relative;
            padding-left: 4.8rem;

            @media screen and (max-width: 990px) {
              font-size: 1.7rem;
              padding-left: 4rem;
            }
          }

          li svg {
            display: block;
            width: 2.8rem;
            height: 2.8rem;
            position: absolute;
            left: 0;
            top: 0;

            @media screen and (max-width: 990px) {
              width: 2.6rem;
              height: 2.6rem;
            }
          }
        }
        
        .link-button {
          margin-top: 4rem;

          @media screen and (max-width: 990px) {
            margin-top: 2.5rem;
          }
        }
      }
    }
  }

  &.custom-color {
    .link-button {
      background: var(--custom-color);
    }

    .card-block__description {
      svg {
        circle {
          fill: var(--custom-color);
        }
      }
    }
  }
}