.colorBanner {
  align-items: center;
  column-gap: 1.5rem;
  display: grid;
  grid-template-areas: 'title button'
    'text button';
  grid-template-columns: 1fr auto;
  padding: 2.6rem 2.2rem;
  row-gap: .8rem;
}

.colorBanner .heading-block {
  grid-area: title;
}

.colorBanner .text-block {
  grid-area: text;
}

.colorBanner .button {
  grid-area: button;
}

.colorBanner .button:after {
  background-color: currentcolor;
  content: '';
  display: block;
  height: 1rem;
  mask-image: url("data:image/svg+xml,%3Csvg width='6' height='10' class='icon' viewBox='0 0 6 10' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 9L5 5L1 1' stroke='currentColor' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
  mask-position: center right;
  mask-repeat: no-repeat;
  width: .6rem;
}

@media screen and (max-width: 749px) {
  .colorBanner .button {
    min-width: 0;
    padding: 0 1.6rem;
  }

  .colorBanner .button span {
    position: absolute !important;
    overflow: hidden;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    clip: rect(0 0 0 0);
    word-wrap: normal !important;
  }
}

@media screen and (min-width: 750px) {
  .colorBanner {
    column-gap: 2rem;
    padding: 5rem 6rem;
    row-gap: 2.4rem;
  }

  .colorBanner .button:after {
    display: none;
  }
}