[data-component-id="theodor:grid_box_lead"] {
  /* @todo Add your styles here. */

  container-name: grid_box_lead;
  container-type: inline-size;

  .lead-box__link_wrapper {
    text-decoration: none;

    * {
      transition: color 0.3s ease-in-out;
    }

    &:hover {
      > .lead-box__image {
        opacity: 0.6;
      }

      * {
        color: var(--brand-colors-gray-1);
      }

    }
  }

  .lead-box__text {
    padding:1.75rem;
    background-color: var(--brand-colors-boell-lightgray);
    font-size:1.125rem;
    line-height:1.5rem;
    @container grid_box_lead (min-width: 700px) {

    }
  }

  .lead-box__image {
    transition: opacity 0.3s ease-in-out;
  }

  .lead-box__image img {
    width: 100%;
  }

  .lead__headline{
    font-size:1.25rem;
    line-height:1.625rem;
    font-weight:700;
  }

  .lead-box__boxcolor__purple .lead-box__text {
    background-color:var(--brand-colors-boell-purple) ;
  }

  .lead-box__boxcolor__gray .lead-box__text {
    background-color:var(--brand-colors-boell-lightgray) ;
  }

  .lead-box__boxcolor__green .lead-box__text {
    background-color: var(--brand-colors-boell-lightgreen);
  }

}