/* --- PIXELATE BIRD S'IL VOUS PLAIT --- */

#melonGuild-7 img {
	image-rendering: pixelated;
}

/* --- SIZING & RESPONSIVENESS --- */

#melonGuild-7.melonGuild {
	max-width: 550px;
	margin: 0 auto;
	flex-flow: row wrap;
	word-break: break-word;
	gap: 5px 2rem;
	justify-content: center;
	container-type: inline-size;
	container-name: natureguild;
}

#melonGuild-7 .melonGuild-prev,
#melonGuild-7 .melonGuild-next {
	width: 20%;
}

@container natureguild (width < 550px) {
	#melonGuild-7 .melonGuild-info {
		width: 100%;
	}
	#melonGuild-7 .melonGuild-prev {
		order: 2;
		text-align: right;
	}
	#melonGuild-7 .melonGuild-next {
		order: 3;
		text-align: left;
	}
	#melonGuild-7 .melonGuild-prev,
	#melonGuild-7 .melonGuild-next {
		width: calc(50% - 1rem);
	}
}

@container natureguild (width < 300px) {
	#melonGuild-7 .melonGuild-info {
		font-size: 90%;
	}
	#melonGuild-7 {
		line-height: 1;
	}
	#melonGuild-7 .melonGuild-prev,
	#melonGuild-7 .melonGuild-next {
		font-size: 75%
	}
}

/* --- CHANGING DISPLAY TEXT --- */

#melonGuild-7 .melonGuild-info span {
    display: none;
}

#melonGuild-7 .melonGuild-info b::after {
    content: ' Webring';
}

/* --- REMOVE GAP IN PREV/NEXT --- */

#melonGuild-7 .melonGuild-prev::before {
	content: '\21E0  ';
	margin-right: 0;
}

#melonGuild-7 .melonGuild-next::after {
  content: '  \21E2';
  margin-left: 0;
}

/* --- LITTLE MORE SPACE FOR TITLE --- */

#melonGuild-7 .melonGuild-info b {
    margin-bottom: 5px; 
}

/* --- COLORS ??? --- */
/* oooh maybe this can go in a second css file */