.image-with-text-cards {
  background-image: var(--background-image);
  background-color: var(--background-color);
  background-repeat: no-repeat;
  background-size: cover;

  padding-top: var(--padding-top);
  padding-bottom: var(--padding-bottom);

  & .image-with-text-cards__wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;

    gap: 50px;

    &.page-width {
      max-width: 1010px;
    }

    & .image-with-text-cards__heading {
      text-align: center;

      & .heading__label {
        display: inline-flex;
        justify-content: center;
        align-items: center;

        min-height: 26px;
        margin-bottom: 10px;
        padding: 2px 4px;

        color: var(--label-color, #FEFDE9);
        background-color: var(--label-background, #FF5033);
        
        font-family: "DM Sans";
        font-size: 20px;
        text-align: center;
        font-style: normal;
        font-weight: 600;
        line-height: 130%;
        letter-spacing: -0.5px; 
      }

      & .heading__title {
        margin: 0;
          
        color: var(--heading-color, #96214A);
        text-align: center;
        
        font-family: "DM Sans";
        font-size: 40px;
        font-style: normal;
        font-weight: 600;
        line-height: 120%;
        letter-spacing: -0.5px;
      }
    }

    & .image-with-text-cards__grid.cards-wrapper {
      display: grid;
      grid-template-columns: repeat(var(--grid-columns), 1fr);
      align-items: stretch;
      gap: 12px 20px;
      
      width: 100%;

      & .cards-wrapper__card {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 15px 17px;

        width: 100%;
        height: auto;
        padding: 20px;

        background: var(--card-background, #FFF);
        border: 1px solid var(--card-border, #F3B5D2);
        border-radius: 10px;
        box-shadow: 2px 2px 10px 0 rgba(185, 95, 167, 0.40);

        & .card__image {
          width: 100%;
          height: auto;

          border-radius: 10px;
          border: 1px solid rgba(243, 181, 210, 0.20);
          overflow: hidden;

          & img,
          picture,
          svg {
            width: 100%;
            height: 100%;
            object-fit: cover;
          }
        }

        & .card__text {
          & .card__title {
            margin: 0 0 6px 0;

            color: var(--accent-color, #FF5033);
            text-align: center;
            
            font-family: "DM Sans";
            font-size: 32px;
            font-style: normal;
            font-weight: 600;
            line-height: 140%;
            letter-spacing: -0.5px;
          }

          & .card__content {
            display: block;

            color: var(--text-color, #101828);
            text-align: center;
            padding: 0;
            
            font-family: "DM Sans";
            font-size: 16px;
            font-style: normal;
            font-weight: 400;
            letter-spacing: 0;
            line-height: 160%;

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

            & > :first-child {
              margin-bottom: 0;
            }
          }
        }
      }
    }
  }

  @media screen and (max-width: 749px) {
    background-image: var(--background-image-mobile);

    padding-top: var(--padding-top-mobile);
    padding-bottom: var(--padding-bottom-mobile);

    & .image-with-text-cards__wrapper { 
      gap: 20px;

      & .image-with-text-cards__heading {
        & .heading__label {
          min-height: 23px;
          margin-bottom: 14px;
          padding: 2px 3px;

          font-size: 18px;
        }

        & .heading__title {
          font-size: 26px;
        }
      }

      & .image-with-text-cards__grid.cards-wrapper {
        grid-template-columns: repeat(var(--grid-columns-mobile), 1fr);

        & .cards-wrapper__card {
          flex-direction: row;
          padding: 10px 15px;

          & .card__image {
            flex: 1 0 38%;

            & picture {
              display: flex;
            }

            & img {
              height: auto;
            }
          }

          & .card__text {
            & .card__title {
              font-size: 16px;
              text-align: left;
              margin-bottom: 0;
            }

            & .card__content {
              font-size: 15px;
              text-align: left;
            }
          }
        }
      }
    }
  }
}