/*--- Post View and Page View ---*/

img.preview {
display: none;
}

museum {
display: grid;
grid-template-columns: 1fr;
gap: 2rem;
min-width: 100%;
width: 200%;
margin: 0 -50%;
}

museum display {
display: grid;
gap: 2rem;
}

museum display.two {
grid-template-columns: 1fr 1fr;
}

museum display.three {
grid-template-columns: 1fr 1fr 1fr;
}

museum display.four {
grid-template-columns: 1fr 1fr 1fr 1fr;
}

museum display.five {
grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
}

museum display.six {
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
}

museum display.eight {
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
}

museum display.ten {
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
}

museum display div {
display: flex;
align-items: center;
justify-content: center;
grid-column: span 1;
max-width: calc(100vw - 2rem);
max-height: calc(100vh - 2rem);
}

museum display.svg div {
display: flex;
width: 100%;
}

museum display.svg div svg {
display: block;
width: 75%;
height: auto;
margin: 0 auto;
}

museum display.youtube div {
width: 100%;
aspect-ratio: 16 / 9;
}

museum display.youtube div iframe {
display: block;
width: 100%;
height: 100%;
}

/*--- Pluto Moved On ---*/

.pmo {
position: relative;
display: block;
background: #121325;
margin: 0 auto;
overflow: hidden;
}

#pmo01,
#pmo02,
#pmo03 {
position: absolute;
top: 0;
left: 0;
background: transparent;
border: 0;
}

#pmo svg {
display: block;
width: 100%;
height: auto;
}

#pmo01 #d20 #shape {
fill: yellow;
stroke: #a6a600;
stroke-width: 0.5;
}

#pmo01 #d20 #lines {
fill: none;
stroke: #a6a600;
stroke-linejoin: bevel;
stroke-width: 0.5;
}

#pmo02 {
animation: spin 60s linear infinite;
}

@keyframes spin { 
100% {
transform: rotate(360deg); 
} 
}

#pmo02 #radiance #corona {
fill: none;
stroke: yellow;
stroke-width: 1.5;
}

#pmo02 #radiance #rays {
stroke: yellow;
stroke-width: 1.5;
}

#pmo03 #numbers {
fill: #a6a600;
fill-rule: evenodd;
}

/*--- Medium Screen Size ---*/

@media screen and (max-width:1200px) {

museum {
min-width: unset;
margin: 0;
}

museum display.two {
grid-template-columns: 1fr;
}

museum display.four {
grid-template-columns: 1fr 1fr;
}

museum display.six {
grid-template-columns: 1fr 1fr 1fr;
}

museum display.eight {
grid-template-columns: 1fr 1fr 1fr 1fr;
}

museum display.ten {
grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
}

}

/*--- Small Screen Size ---*/

@media screen and (max-width:800px) {

museum display.four,
museum display.six,
museum display.eight,
museum display.ten {
grid-template-columns: 1fr 1fr;
}

}