.studio{display:grid;gap:.35em;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));margin-top:10px}
.studio>div{display:flex;flex-direction:column;justify-content:space-between;align-items:left;background:#caacc8;border-radius:7px;border-bottom-style:solid;margin:5px;padding:15px}
.studio a{color:var(--darkPurple)}
.studio a:hover{color:var(--white)}
@media (max-width:612px){
.studio{grid-template-columns:repeat(2,1fr)}
.studio>div{margin:3px;padding:3px;font-size:small}
}
.directions{display:grid;grid-template-columns:repeat(2,1fr);grid-template-rows:repeat(3,minmax(200px,auto));grid-template-areas:"image image" "written credentials" "googlemap evac";margin:.5em}
.image{grid-area:image}
.image img{width:100%;height:100%;object-fit:cover;border-radius:5px}
.written{grid-area:written;display:flex;height:auto;flex-direction:column;background-color:var(--primeColour);padding:5px;border-radius:5px}
.credentials{grid-area:credentials;background-color:var(--secondaryColour);color:var(--primeColour);padding:5px;border-radius:5px;place-content:center;align-items:center}
.credentials img{width:100%;height:100%;object-fit:cover;border-radius:5px}
.googlemap{grid-area:googlemap;height:100%;border-radius:5px}
.googlemap iframe{border-radius:5px}
.evac{grid-area:evac}
.evac img{width:100%;height:auto;border-radius:5px;object-fit:cover}
.key{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr))}
.key img{width:100%;height:100%;object-fit:cover;border-radius:5px}
.key div{padding-left:5px}
.staff-list{flex-wrap:wrap;gap:.2em;grid-template-columns:repeat(auto-fit,minmax(90px,1fr));grid-auto-rows:minmax(45px,auto);margin:3px}
.staff-list>div{margin:5px;padding:2px}
.staff-list h4{font-size:large}
.staff-list form{margin:0;padding:0}
.staff-list input{margin:2px;padding:8px;width:98%;background-color:var(--fourthColour);font-size:medium;transition:all .3s ease}
.staff-list input:hover{margin:4px;padding:10px;width:101%;background-color:var(--primeColour);font-size:medium}
@media (max-width:500px){
.directions{grid-template-columns:1fr;grid-template-rows:repeat(auto-fit,minmax(190px,auto));grid-template-areas:"image" "written" "credentials" "googlemap" "evac"}
.googlemap{grid-area:googlemap;height:250px;border-radius:5px}
.image img{height:auto;width:100%;object-fit:cover;border-radius:5px}
}
@media (min-width:950px){
.directions{grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,auto);grid-template-areas:"written image image" "evac credentials googlemap"}
}
.halldirections{display:grid;grid-template-columns:repeat(2,1fr);grid-template-rows:repeat(3,minmax(200px,auto));grid-template-areas:"image image" "written googlemap" "hallmaterials googlemap";margin:.5em}
.halldirections>div>a{text-decoration:none;color:#aa0a0a}
.halldirections>div>a:hover{color:#6d1818}
@media (max-width:500px){
.halldirections{display:grid;grid-template-columns:1fr;grid-template-rows:repeat(4,minmax(190px,auto));grid-template-areas:"image" "written" "googlemap" "hallmaterials"}
}
@media (min-width:850px){
.halldirections{display:grid;grid-template-columns:repeat(5,1fr);grid-template-rows:repeat(2,auto);grid-template-areas:"written written written image image" "hallmaterials hallmaterials googlemap googlemap googlemap"}
}
.hallmaterials{grid-area:hallmaterials;display:flex;height:auto;overflow-x:hidden;flex-direction:column;background-color:#eff1d4;color:#003;padding:15px;border-radius:5px}
@media (prefers-color-scheme:dark){
:root{--deepblue:rgba(70, 80, 194, 0.35);--paleblue:rgba(36, 41, 112, 0.35);--white:rgb(206, 188, 188);--red:#c70d0d;--darkred:#aa0a0a;--grey:rgb(0, 0, 0, 0.95)}
.studio>div{background:var(--deepblue)}
.studio p a{color:var(--red)}
.studio p a:hover{color:var(--darkred)}
.written{background-color:var(--blue)}
.written p a{color:#f57a7a}
.written p a:hover{color:#f4f4f8}
.credentials{background-color:rgb(77,82,78,.95)}
.credentials p{color:var(--grey)}
.credentials p a{text-decoration:none;color:#0b18a7}
.hallmaterials{background-color:rgba(241,230,203,.5);color:#1b1b3a;padding:15px;border-radius:5px}
}