.content-blocks-with-background {
  grid-template-columns: repeat(4, 1fr);

  margin-bottom: 50px;
  border-radius: 80px;
  padding: 60px 60px 60px 60px;
  
  &.green {
    background-color: $light_green;
  }

  &.m_green {
    background-color: $medium_green;
  }
  
  &.orange {
    background-color: $light_orange;
  }

  &.m_orange {
    background-color: $medium_orange;
  }
  
  &.blue {
    background-color: $light_blue;
  }

  &.m_blue {
    background-color: $medium_blue;
  }


  h2 {
    padding-bottom: 20px;
  }

  .image-container {
    margin-bottom: 30px;

    @media (min-width: $breakpoint_lg) {
      margin-bottom: 60px;
    }

    p {
      margin-top: 20px;
    }
  }

  .content-image {
    border-radius: 50px;
    width: 100%;
  }

  .btn:first-of-type {
      margin: 40px 20px 0 0;
      @media (min-width: $breakpoint_lg) {
        margin: 40px 0 0 0;
      }  
  }

  .btn {
    margin: 20px 20px 0 0;
    @media (min-width: $breakpoint_lg) {
        margin: 40px 0 0 0;
    }
  }
    

  
  @media (min-width: $breakpoint_lg) {
    grid-template-columns: repeat(12, 1fr);
  }
}

.content-blocks {
  grid-template-columns: repeat(4, 1fr);
  padding: 0 0 50px 0;
  
  h2 {
    padding-bottom: 20px;
  }
  
  .grid-layout {
    margin: 0;
  }
  
  .content-text {
      margin-bottom: 30px;

      h2 {
        margin-bottom: 20px;
      }

      @media (min-width: $breakpoint_lg) {
        margin-bottom: 60px;
      }
  }

  .image-container {
    margin-bottom: 30px;

    @media (min-width: $breakpoint_lg) {
      margin-bottom: 60px;
    }

    p {
      margin-top: 20px;
    }
  }

  .content-image {
    border-radius: 50px;
    width: 100%;
  }

  .btn {
    margin: 0 20px 0 0;
    margin-bottom: 30px;

    @media (min-width: $breakpoint_lg) {
      margin-bottom: 60px;
    }
  }

  @media (min-width: $breakpoint_lg) {
    grid-template-columns: repeat(12, 1fr);
    margin: 0 auto;
    max-width: 1140px;
    grid-gap: 30px;
  }

  @media (min-width: $breakpoint_2xl) {
    max-width: 1440px;
  }
}

.content-block-listing-element-with-number {

  .listing-element {
    grid-column: span 4;
    padding: 40px 30px;
    border-radius: 50px;
    margin-bottom: 30px;

    h1 {
      font-size: 7.5rem;
      line-height: 7.5rem;
      font-weight: 400;
    }
  }

  .green {
    background-color: $light_green;
  }

  .m_green {
    background-color: $medium_green;
  }

  .orange {
    background-color: $light_orange;
  }

  .m_orange {
    background-color: $medium_orange;
  }

  .blue {
    background-color: $light_blue;
  }

  .m_blue {
    background-color: $medium_blue;
  }

  .icon {
    display: none;
  }

  @media (min-width: $breakpoint_lg) {
    margin-bottom: 60px;
  }
}

.content-block-listing-element-with-title {
  grid-template-columns: repeat(4, 1fr);

  .listing-element {
    padding: 30px 40px;
    border-radius: 50px;

    .title-container {
      display: flex;
      align-items: flex-start;
      justify-content: left;
      padding-bottom: 10px;

      .icon {
        height: 32px;
        width: 32px;
      }
    }


    .icon {
      width: 24px;
      height: 24px;
      padding-right: 5px;
    }
  }

  .green {
    background-color: $light_green;
  }

  .m_green {
    background-color: $medium_green;
  }

  .orange {
    background-color: $light_orange;
  }

  .m_orange {
    background-color: $medium_orange;
  }

  .blue {
    background-color: $light_blue;
  }

  .m_blue {
    background-color: $medium_blue;
  }
}