on each page */
.nav-flex {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
gap: 12px 20px;
padding: 0 10px;
}
/* ---- VIDEO EMBEDS ---- */
/* Wrap each iframe in:
*/
.video-wrapper {
max-width: 560px;
width: 100%;
margin: 16px auto;
padding: 0 10px;
box-sizing: border-box;
}
.video-inner {
position: relative;
padding-bottom: 56.25%; /* 16:9 */
height: 0;
overflow: hidden;
}
.video-inner iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: 0;
}
/* ---- FILMS & MUSIC: 2-column video grid ---- */
.video-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
max-width: 1200px;
margin: 0 auto;
padding: 20px 10px;
box-sizing: border-box;
}
/* On small phones, stack to 1 column */
@media (max-width: 640px) {
.video-grid {
grid-template-columns: 1fr;
}
}
/* ---- PHOTO GALLERY ---- */
.spotlight-group {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 8px;
padding: 0 10px;
margin: 20px auto !important;
}
.spotlight-group img {
width: 150px;
height: 110px;
object-fit: cover;
display: block;
}
@media (max-width: 480px) {
.spotlight-group img {
width: 110px;
height: 80px;
}
}
/* ---- BIO & CONTACT: center content with padding ---- */
.content-block {
max-width: 560px;
width: 100%;
margin: 0 auto;
padding: 0 20px;
box-sizing: border-box;
}
/* ---- CONTACT FORM ---- */
input[type="text"],
input[type="email"] {
width: 100%;
box-sizing: border-box;
padding: 8px;
font-size: 16px; /* prevents iOS zoom-on-focus */
}
textarea.fcf-form-control {
width: 100%;
box-sizing: border-box;
font-size: 16px;
}
/* ---- AUDIO EMBEDS (SoundCloud, Bandcamp) ---- */
.audio-embed {
width: 100%;
max-width: 560px;
margin: 0 auto;
}
.audio-embed iframe {
width: 100%;
}
/* ---- SPOTIFY embed ---- */
.spotify-embed {
width: 100%;
max-width: 560px;
margin: 0 auto;
}
.spotify-embed iframe {
width: 100%;
height: 352px;
}