/* Form portrayal based on: https://www.scale.at/blog/responsive-form-layout-css-grid */

* {
  box-sizing: border-box;
}

.content-container {
  max-width: 640px;
/*  margin-inline-start: auto;
    margin-inline-end: auto;
*/
  padding: 20px;   /* gw  was 0 24px*/
  border: 3px solid rgb(142, 159, 150);
  background-color: rgb(253, 251, 251);
  margin: 30px 30px 30px 0px;
}

.content-container-wide {
  max-width: 900px;
}


.contact-form {
  display: grid;
  gap: 8px;
  line-height: 1.3;
}

.contact-form > label:not(:first-child),
.org-type-label,
.frequency-label,
.contact-form [type="submit"] {
	margin-block-start: 16px;
}

.contact-form > label,
.org-type-label,
.frequency-label {
  font-family: "Georgia", "Times", serif;
  color: indigo;
}


/* Increase the spacing between the radio controls. */
[role="radiogroup"] > div + div {
	margin-top: 8px;
}


/* Styles for the submit button. */
.contact-form [type="submit"] {
  border-radius: 8px;
  border-color: black;
  background-color: indigo;
  color: #ffffff;
  padding: 8px 16px;
  min-width: 100px;
  font-weight: 700;
}

.contact-form [type="submit"]:hover {
  background-color: darkmagenta;
  border-color: black;
}

.NHS_building_image {
	vertical-align: top;
	width: 100%;
	height: auto;
	padding: 0vw 0vw 3vw 0vw;
}

/* The above CSS is for "narrow / smartphone" rendering. */
/* Below are the adjustments for a wide display. */

@media screen and (min-width: 800px) {
	.contact-form {
		grid-template-columns: 1fr 2fr;
		gap: 24px;
	}
	.contact-form > label:not(:first-child),
	.org-type-label,	
	.contact-form [type="submit"] {
		margin-block-start: 0px;
	}
	
	.contact-form [type="submit"] {
		grid-column: 1 / span 2;
		justify-self: center;
	}

	.NHS_building_image {
		width: 640px; 
		height: auto;
		padding: 0vw 0vw 3vw 0vw;
	}

}