* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: Arial, sans-serif;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

header, footer {
    background: #cac4c4;
    color: rgb(0, 0, 0);
    padding: 1rem;
    text-align: center;
}

main {
    flex: 1;
    padding: 1rem;
}

.gallery {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    justify-content: center;
}

.gallery img, .gallery video {
    width: 100%;
    max-width: 300px;
    height: auto;
}

/* Mobile: slike prvo */
.image1 { order: 1; }
.image2 { order: 2; }
.image3 { order: 3; }
.video1 { order: 4; }
.video2 { order: 5; }
.video3 { order: 6; }

/* Tablet: video prvo */
@media (min-width: 600px) {
    .gallery img, .gallery video { width: 48%; }
    .video1 { order: 1; }
    .video2 { order: 2; }
    .video3 { order: 3; }
    .image1 { order: 4; }
    .image2 { order: 5; }
    .image3 { order: 6; }
}

/* Desktop: alternirajući */
@media (min-width: 1024px) {
    .gallery img, .gallery video { width: 32%; }
    .image1 { order: 1; }
    .video1 { order: 2; }
    .image2 { order: 3; }
    .video2 { order: 4; }
    .image3 { order: 5; }
    .video3 { order: 6; }
}