@layer components.page-contact {
  	[data-c-page-contact] {
  		.box {
  			margin-top: 50px;
  			margin-bottom: 50px;
  			font-size: var(--font-size-base);
  			color: var(--color-dark-blue);

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

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

  			@media screen and (max-width: 767px) {
  				font-size: var(--font-size-lg);
  				row-gap: 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;
  				}
  			}

  			.map-wrapper {
  				height: 500px;

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

  				@media screen and (max-width: 767px) {
  					height: 300px;
  				}

  				@media (max-width: 576px) {
  					height: 200px;
  				}

  				#map {
  					width: 100%;
  					height: 100%;
  				}


  			}

  			.text-wrapper {
  				display: flex;
  				flex-direction: column;
  				justify-content: center;

  				.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: 1199px) {
  						font-size: var(--font-size-4xl);
  					}

  					@media screen and (max-width: 991px) {
  						margin-bottom: 0;
  					}

  				}

  				.site-name {
  					font-weight: var(--font-weight-extra-bold);
  					font-size: var(--font-size-2xl);

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

  				.care-of {
  					margin: 0;
  				}

  				address {
  					font-style: normal;
  					margin: var(--space-2) 0 0;
  				}

  				a {
  					display: block;
  					margin: var(--space-2) 0 0;
  					color: inherit;
  					text-decoration: underline;
  					text-underline-offset: 3px;
  					transition: color 0.3s ease;

  					&:hover,
  					&:focus {
  						color: var(--color-red);
  					}
  				}
  			}
  		}
  	}
  }