@layer components.page-teaser-4 {
  	[data-c-page-teaser-4] {
  		padding-top: 50px;
  		padding-bottom: 50px;

  		@media screen and (max-width: 767px) {
  			padding-top: 25px;
  			padding-bottom: 25px;
  		}

  		.box {
  			font-size: var(--font-size-base);
  			background-color: rgba(var(--color-yellow-rgb), 0.4);
  			color: var(--color-dark-blue);

  			@media screen and (max-width: 991px) {
  				flex-direction: column-reverse;
  			}

  			@media screen and (max-width: 767px) {
  				font-size: var(--font-size-lg);
  				margin-left: -20px;
  				margin-right: -20px;
  			}

  			@media (max-width: 576px) {
  				font-size: var(--font-size-md);
  			}

  			.image {
  				width: 100%;
  				height: 100%;
  				object-fit: cover;

  				@media screen and (max-width: 991px) {
  					height: 200px;
  				}
  			}

  			.text-wrapper {
  				padding: 30px 60px 55px;

  				@media screen and (max-width: 767px) {
  					padding: 32px 20px;
  				}

  				.eyebrow {
  					font-weight: var(--font-weight-extra-bold);

  					@media screen and (max-width: 767px) {
  						font-size: var(--font-size-sm);
  						margin: 0 0 5px;
  						font-weight: var(--font-weight-normal);
  					}
  				}

  				.title {
  					margin-bottom: 20px;
  					font-size: var(--font-size-5xl);
  					line-height: 100%;
  					font-weight: var(--font-weight-extra-bold);
  					font-family: var(--font-family-serif);

  					@media screen and (max-width: 1399px) {
  						font-size: var(--font-size-4xl);
  						margin-bottom: 0;
  					}

  					@media screen and (max-width: 767px) {
  						font-size: var(--font-size-3xl);
  					}
  				}

  				.text {
  					margin-bottom: var(--space-9);
  					line-height: 140%;

  					@media screen and (max-width: 767px) {
  						font-size: var(--font-size-sm);
  						margin-bottom: 30px;
  					}
  				}
  			}
  		}
  	}
  }