.main-content {
	display: grid;
	grid-template-columns: auto;
	gap:1em;
}

@media(min-width:992px) {
	.main-content {
		grid-template-columns: 8fr 4fr;
	}
}

.realtor-card {
	display: grid;
	grid-template:
		'image title' auto
		'details details' auto
		'bio bio' auto
		/ 2fr 3fr;
	row-gap: 1em;
}

@media(min-width:576px) {
    .realtor-card {
		grid-template:
			'image title' auto
			'image button' auto
			'details details' auto
			'bio bio' auto
			/ 1fr 2fr
		;
    }
}
@media(min-width:768px) {
	.realtor-card {
		grid-template:
			'image title' auto
			'image details' auto
			'image button' auto
			'bio bio' auto
			/ 1fr 2fr;
	}
}

.realtor-img {
	grid-area: image;
	border-top-left-radius: inherit;
	min-height: 200px;
}
.realtor-img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-top-left-radius: inherit;
}

.realtor-title {
	padding: 1em;
	grid-area: title;
}

.realtor-bio {
	padding: 1em;
	grid-area: bio;
}

.contact-button {
	display: flex;
	justify-content: center;
	position: fixed;
	padding: 1em;
	width: 100vw;
	background-color: white;
	bottom: 0px;
	left: 0px;
	z-index: 1010;
	border-top: 1px solid var(--bs-border-color);
}

@media(min-width:576px) {
	.contact-button {
		width: auto;
		position: relative;
		grid-area: button;
		border:none;
		justify-content:start;

	}
}

.contact-details {
	padding:0 1em;
	grid-area: details;
	display: grid;
	grid-template-columns: auto 1fr auto;
	grid-template-rows: auto;
	gap: 0 0.5em;
}

.contact-item {
	display: grid;
	grid-column: span 3;
	grid-template-columns: subgrid;
	column-gap: .5em;
	margin-bottom: 10px;
}

	.contact-item span {
		text-wrap: nowrap;
	}

.contact-item span .bi {
	color: var(--ppr-blue);
}

.contact-item .label {
	color: var(--bs-secondary);
	font-size: 0.875rem;
}
	.contact-item .link-wrap {
		text-overflow: ellipsis;
		overflow: hidden;
	}
	.contact-item a {
		color: black;
		text-wrap: nowrap;
	}

address p {
	margin-bottom: 0;
}

.office .office-location {
	border: none;
	padding: 0;
}

.license-numbers {
	display:flex;
	flex-direction:column;
}

.bi-copy {
	color: var(--bs-secondary);
}

	.bi-copy:hover {
		cursor: pointer;
		color: var(--ppr-blue);
		transform:scale(1.1);
	}