/** LAYOUT **/
.wide-contact-cards-container {
	/** display: flex;
	justify-content: space-around;
	flex-flow: wrap;
	**/
	margin: 0rem 10rem;
}

.wide-contact-card-with-image {
    display: flex;
    justify-content: center;
    align-items: center;
	width: 100%;
	height: 25rem;
	margin: 2.5rem 0rem;
}

img.wide-contact-card-with-image__image {
	max-width: 15em;
	margin: 2rem 0rem;
}

.wide-contact-card-with-image__gap {
	width: 2rem;
}

.contact-card-with-image__text {
	padding: 2em;
	width: 20em;
}

p.contact-card__name {
	margin-top: 0.5rem;
	margin-bottom: 0.5rem;
	border-bottom: 2.5px solid #E90802;
}

p.contact-card__job-title, p.contact-card__college-name {
	margin-top: 0.25rem;
	margin-bottom: 1.5rem;
}

p.contact-card__phone-number, p.contact-card__email, p.contact-card__general-text {
	margin-top: 0.25rem;
	margin-bottom: 0.25rem;
}


/** TEXT **/
p.contact-card__name {
	text-transform: uppercase;
	font-weight: bold;
}

p.contact-card__job-title {
	font-style: italic;
}

p.contact-card__college-name {
	font-weight: bold;
}


/** ---------- Responsive Wide Contact Cards ---------- **/

/* Container spacing scales with viewport */
.wide-contact-cards-container {
  margin: 0 1rem;
}

@media (min-width: 640px) { /* ~sm */
  .wide-contact-cards-container { margin: 0 2rem; }
}
@media (min-width: 1024px) { /* ~lg */
  .wide-contact-cards-container { margin: 0 6rem; }
}
@media (min-width: 1280px) { /* ~xl */
  .wide-contact-cards-container { margin: 0 10rem; }
}

/* Card layout: flexible height, built-in gap (keeps your existing gap div working too) */
.wide-contact-card-with-image {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2rem;                 /* modern gap for flex; plays nice with your gap div */
  width: 100%;
  height: auto;              /* was fixed 25rem; let content define height */
  margin: 2rem 0;
  flex-wrap: nowrap;
}

/* Image scales but doesn’t stretch */
img.wide-contact-card-with-image__image {
  max-width: 300px;          /* up from 15em; adjust as you like */
  width: 100%;
  height: auto;
  flex: 0 0 auto;
  margin: 0;                 /* remove extra vertical margin; spacing from gap */
}

/* The spacer div is still supported */
.wide-contact-card-with-image__gap {
  width: 2rem;
  flex: 0 0 2rem;
}

/* TEXT BLOCK — fix the selector to match your HTML */
.wide-contact-card-with-image__text {
  padding: 2em;
  width: 100%;
  max-width: 680px;
  flex: 1 1 0;
}

/* Tighter spacing for phone/email and nicer wraps on long addresses */
p.contact-card__phone-number,
p.contact-card__email,
p.contact-card__general-text,
p.phone-info {
  margin-top: 0.25rem;
  margin-bottom: 0.25rem;
  word-break: break-word;        /* prevents overflow on long emails */
}

/* ---------- Mobile-first stacking ---------- */
@media (max-width: 767.98px) {
  .wide-contact-card-with-image {
    flex-direction: column;      /* stack image over text */
    align-items: stretch;        /* make text full width */
    gap: 1rem;
    margin: 1.5rem 0;
  }

  img.wide-contact-card-with-image__image {
    max-width: 100%;             /* image goes full width */
  }

  .wide-contact-card-with-image__gap {
    width: 100%;
    height: 1rem;                /* vertical spacing between image and text */
    flex: 0 0 auto;
  }

  .wide-contact-card-with-image__text {
    padding: 1rem;               /* softer padding on small screens */
    max-width: 100%;
  }

  p.contact-card__name {
    margin-top: 0.25rem;
  }
}

/* ---------- Medium screens: side-by-side, comfy sizes ---------- */
@media (min-width: 768px) and (max-width: 1023.98px) {
  .wide-contact-card-with-image {
    gap: 1.5rem;
  }

  img.wide-contact-card-with-image__image {
    max-width: 240px;
  }

  .wide-contact-card-with-image__text {
    padding: 1.25rem 1rem;
  }
}

/* ---------- Large screens: give the image a bit more presence ---------- */
/* Large screens: stack image over text to avoid squish */
@media (max-width: 1024px) {
  .wide-contact-card-with-image {
    flex-direction: column;   /* was row */
    align-items: center;      /* center content */
    gap: 1.25rem;
  }

  /* Make the spacer act as vertical space on large screens */
  .wide-contact-card-with-image__gap {
    width: 100%;
    height: 1.25rem;
    flex: 0 0 auto;
  }

  /* Give the text a readable line length */
  .wide-contact-card-with-image__text {
    max-width: 65ch;          /* or try 60–70ch */
    padding: 1.5rem 0;
  }

  /* Slightly larger image is fine since we’re stacking */
  img.wide-contact-card-with-image__image {
    max-width: 320px;         /* tweak as you like */
  }
}