html {
  interpolate-size: allow-keywords;
}

.graphic {
  margin: 0.25em;
  display: grid;
  grid-template-columns: 1fr 2fr;
  width: fit-content;
  border-radius: 0.5rem;
  max-width:425px;
	overflow:hidden;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
  background:white;
  --accent-color: #003C71;
}
.graphic .graphicContent {
  padding: 0.5em;
max-width:70ch;
	line-height:1.5;
	font-size:12pt;
	display:flex;
	flex-direction:column;
	justify-content:space-between;
}

.graphic .graphicContent button{
  color: var(--accent-color);
  text-align:center;
  border: 2px solid var(--accent-color);
  background-color: white;
  padding: 0.25em 1.5em;
  border-radius:0.5em;
  display:flex;
  justify-content:center;
  width: fit-content;
  font-size: 0.75rem;
}
.graphic .graphicContent button:hover{
  background-color: var(--accent-color);
  color: white;
}

.featured-container{
  background:#fffcf3;
  border: 2px solid #FEC10D;
  margin:-1em;
  margin-bottom:2em;
  border-radius: 0.5rem;
  width:100%;
}
.featured-container .PerGraphicGroup{
padding:0;
padding-top:0;
}
.featured-container h2{
padding-left:1em;
  padding-top:0.25em;
  background:#FEC10D;
  width:100%;
  display:inline-block;
  color:#1d1e1e;
  margin-bottom:0;
}
.featured-container .graphic{
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.graphic .graphicContent p,  .graphic .graphicContent ul li{
  font-size: 12pt !important;
}
.graphic .graphicContent a{
text-decoration:underline;
  color:#582C83;
}

.graphic img {
	max-width:200px;
}

.graphic{
  border:2px solid #8246AF;
  --accent-color: #8246AF;
}

.PerGraphicContainer {
  margin:0;
 padding:0;
  width:fit-content;
}
h2 {
  margin-bottom: 0 !important;
  margin-top:2rem;
}

h3{
margin:2em 0 0 0;
	font-size:18px;
	color:#018488;
}
.featured-container h2{
margin-top:0;
}

.featured-container h3{
  margin-top:1em;
	
}

.featured-container>div{
padding:1em;
}

.PerGraphicGroup {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.btns {
  display: flex;
  justify-content: space-around;
}
button {
  padding: 0.5em 1em;
}

.graphic .graphicContent span.text-clip{
  display: -webkit-box;
  -webkit-line-clamp: 6; /* Number of lines you want to display */
  -webkit-box-orient: vertical;
  overflow: hidden;
   height:200px
  text-overflow: ellipsis;
  white-space: normal;
  word-break: break-word; /* For older browsers */
  overflow-wrap: break-word; /* For modern browsers */
}


@media screen and (max-width:600px){
.graphic {
  margin: 0.125em;
  overflow: hidden;
  display: grid;
  grid-template-columns: 1fr;
	img{
	max-width:100%;
	}
	}
	.PerGraphicContainer {
  margin: 0.25em;
  padding: 0.25em;
}
}