/* stylelint-disable selector-class-pattern */

/* Mobile-first styles */
.content-banner {
  color: var(--color-secondary-a);
  padding: 4rem 2rem;

  a {
    margin-bottom: 0;
  }
}

/* Light backgrounds */
.content-banner.-bg-a {
  background-color: var(--color-bg-a);
}

.content-banner.-bg-b {
  background-color: var(--color-bg-b);
}

.content-banner.-bg-white {
  background-color: var(--color-white);
}

.content-banner.-bg-ecru {
  background: url('./bg-ecru.jpg') no-repeat center center;
  background-size: cover;
}

/* Dark backgrounds */
.content-banner.-bg-c {
  background-color: var(--color-bg-c);
}

.content-banner.-bg-d {
  background-color: var(--color-secondary-a);
}

.content-banner.-bg-c,
.content-banner.-bg-d {
  color: var(--color-white);

  a {
    color: var(--color-white);
  }

  .button {
    background-color: var(--color-white);
    color: var(--color-primary);
    outline-color: var(--color-white);
  }

  .secondary-button {
    border-color: var(--color-white);
  }
}

.content-banner__wrapper {
  display: flex;
  flex-direction: column;
  margin: 0 auto;
  max-width: 80rem;
}

.content-banner__content {
  color: inherit;
}

.content-banner__content h3 {
  border-bottom: 1px solid var(--color-nuetral-b);
  font-size: 2.4rem;
  line-height: 3.6rem;
  margin-bottom: 2.4rem;
  padding-bottom: 2.4rem;
}

.content-banner__content p {
  font-size: 1.6rem;
  line-height: 2.4rem;
  margin-bottom: 2.4rem;
}

.content-banner__buttons {
  align-items: baseline;
  display: flex;
  flex-wrap: wrap;
  grid-auto-columns: max-content;
  grid-auto-flow: column;
  grid-gap: 1.24rem;
  margin-bottom: 2rem;
}

.content-banner__image {
  width: 100%;

  img {
    border-radius: 2px;
    max-width: 100%;
  }
}

/* Desktop styles */
@media (--desktop) {
  .content-banner {
    padding-bottom: 6rem;
    padding-top: 6rem;
  }

  .content-banner__wrapper {
    align-items: center;
    display: grid;
    grid-gap: 2rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin: 0 auto;
    max-width: 112rem;
  }

  .content-banner__content h3 {
    font-size: 3.2rem;
    line-height: 4.8rem;
  }
}