/*---------- RELATED.html ----------*/
.page-header {
  position: relative;
  top: 0;
  left: 0;
  height: 100px;
  background-image: url("/assets/img/site/abstract.webp");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;  
}

.related-grid-container {
background-color: var(--light);
border: 3px solid var(--grey-300);
border-radius: var(--border-radius);

}

.related-grid-parent{  
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
background: var(--grey-200);
}

.related-grid-data {
border-left: var(--grey-300) 3px solid;
border-right: var(--grey-300) 3px solid;
padding-left: 0.5rem;
height: 300px;
overflow-y: auto;
}

.related-grid-data  ul {
padding: 0;
}


.related-notes {
padding-top: 1rem;
font-size: 0.95rem;
text-align: start;
overflow-y: auto;
line-height: 1.25rem;
height: auto;
padding-right: 0.5rem;
}

.related-grid-children {
display: flex;
flex-direction: row;
gap: 0.5rem;
overflow-x: auto;
color: var(--light);
background: var(--grey-800);
padding: 0.5rem;

}

.related-grid-parent img:hover,
.related-grid-children img:hover {
cursor: zoom-in;
}

.related-grid-children p {
  text-align: center;
  font-size: 0.8rem;
  text-overflow: ellipsis;
}
.quickNav-bar { padding-left: 1rem;}

/*---------- MEDIA QUERIES ----------*/

@media only screen and (min-width: 300px) {
.related-grid-container {
display: grid;
grid-template-columns: 1fr;
grid-template-rows: repeat(3, 1fr); 
grid-column-gap: 10px;
grid-row-gap: 10px;
margin: 1rem 0.25rem;
}

.related-grid-parent {
grid-area: 1 / 1 / 2 / 2;
}

.related-grid-data {
grid-area: 2 / 1 / 3 / 2;
}

.related-grid-children {
grid-area: 3 / 1 / 4 / 2;
}

#features {
  display: none;
}
}  

@media only screen and (min-width: 576px) {
.related-grid-container {
display: grid;
grid-template-columns: 300px 1fr;
grid-template-rows: repeat(2, 1fr);
grid-column-gap: 0px;
grid-row-gap: 0px;
}

.related-grid-parent {
grid-area: 1 / 1 / 2 / 2;
}

.related-grid-data {
grid-area: 1 / 2 / 2 / 3;
}

.related-grid-children {
grid-area: 2 / 1 / 3 / 3;
}

}  


@media only screen and (min-width: 1024px) {
.related-grid-container {
display: grid;
grid-template-columns: 300px 350px 1fr;
grid-template-rows: 1fr;
grid-column-gap: 0px;
grid-row-gap: 0px;
}
.related-grid-parent {
grid-area: 1 / 1 / 2 / 2;
}

.related-grid-data {
grid-area: 1 / 2 / 2 / 3;
}

.related-grid-children {
grid-area: 1 / 3 / 2 / 4;
}
}     

@media only screen and (min-width: 1200px) {
.related-grid-container {
display: grid;
grid-template-columns: 300px 400px 1fr;
grid-template-rows: 1fr;
grid-column-gap: 0px;
grid-row-gap: 0px;
margin: 2rem;
}

.related-grid-parent {
grid-area: 1 / 1 / 2 / 2;
}

.related-grid-data {
grid-area: 1 / 2 / 2 / 3;
}

.related-grid-children {
grid-area: 1 / 3/ 2 / 4;
}
}