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

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


  .trail-box {
    display: flex;
    flex-direction: column;
    background-color: var(--brand-colors-boell-lightgray);
    padding: 1.75rem;
    gap: 1.5rem;

    @container grid_box_trail (min-width: 700px) {
      flex-direction: row;
      margin-bottom: 1.75rem;
    }
  }

  .trail-box__column {
    @container grid_box_trail (min-width: 700px) {
      width: 45%;
    }
  }

  .trail-box__column-texts {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }

  .trail__supertitle,
  .trail__headline {
    @container grid_box_trail (min-width: 700px) {
      font-size: 2rem;
    }
  }

  .trail__supertitle {
    font-weight: 700;
  }

  .trail-box__teaser {
    @container grid_box_trail (min-width: 700px) {
      font-size: 1.25rem;
    }
  }

  .trail-box__button-link {
    color: var(--brand-colors-gray-light-3);
    background-color: var(--brand-colors-gray-dark-2);

    &:hover {
      background-color: var(--brand-colors-gray-1);
    }
  }

}