.banner-section {
	background-color: var(--color-tan);
	padding: 40px 0;
}

.banner-section.banner-section--dark {
	background-color: var(--color-dark);
	color: var(--color-white);
}

.banner-modal .banner__content p {
	text-wrap: pretty;
}

.banner__content {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	align-items: center;
  max-width: 1100px;
  width: 90%;
  margin: 0 auto;
}

.banner__content h3 {
    font-size: 1.5625rem;
    font-weight: 500;
    margin-bottom: 8px;
  }

.banner__content p {
    margin-right: 7%;
    line-height: 1.2;
    font-family: var(--font-heading);
    font-weight: bold;
  }

:is(.banner__content p) span {
      display: inline;
      text-wrap: wrap;
    }

.banner__content .secondary {
    font-family: var(--font-body);
    font-weight: 400;
    font-size: var(--font-body-small);
  }

:is(.banner__content .secondary) a {
      text-decoration: none;
      color: var(--color-dark);
    }

.banner__content .main {
    margin-right: 25px;
  }

.banner__content .button {
    margin-top: 25px;
  }

@media screen and (max-width: 1235px) {
	.banner__content .main {
		margin-right: 0;
		display: block;
	}

  .banner__content .secondary {
    display: block;
  }
}

@media screen and (min-width: 1000px) {
	.banner-section {
		padding: 40px 0;
	}
}

@media screen and (min-width: 768px) {
	.banner__content {
		flex-direction: row;
	}
	
	.banner__content span {
		text-wrap: nowrap;
	}

	.banner-section .button {
		margin-top: 0;
	}
}