@media (max-width: 768px) {
   .content {
        flex-direction: column;
        gap: 0;
        align-items: center;
        justify-content: flex-start;
        padding: 0;
        min-height: 100vh;
    }
    
    /* Видео на всю высоту экрана */
    .video-wrapper {
        width: 100%;
        height: 100vh;
        order: 1;
        padding: 0;
        margin: 0;
    }
    
    .video-container {
        width: 100%;
        height: 100vh;
        max-width: none;
        border-radius: 0;
        box-shadow: none;
    }
    
    video {
        width: 100%;
        height: 100vh;
        max-height: none;
        object-fit: cover;
    }
    
    /* Текстовый блок */
    .text-content {
        flex: none;
        width: 100%;
        max-width: none;
        order: 2;
        padding: 30px 20px;
        border-radius: 0;
        margin: 0;
    }

 .color-circle {
        width: 35px;
        height: 35px;
    }
    
    .color-palette {
        gap: 12px;
        margin: 15px 0;
    }
     .calendar {
        padding: 12px;
    }
    
        .calendar-header {
        font-size: 16px;
        font-weight: 600;
    }
    
    .calendar-grid {
        gap: 6px;
        padding: 0 15px;
        font-size: 13px;
    }
    
    .weekday {
        padding: 8px 0;
        font-size: 11px;
        font-weight: 600;
    }
    
    .day {
        border-radius: 6px;
        font-weight: 500;
    }
    
    .date-main {
        font-size: 24px;
        font-weight: 400;
    }
.example-photos {
        gap: 35px;
    }
    

    .photo-item .color-circle {
        width: 32px;
        height: 32px;
    }
    
    .palette-container {
        margin-bottom: 12px;
    }

}

/* Для очень маленьких экранов */
@media (max-width: 480px) {
     .video-wrapper {
        height: 100vh;
    }
    
    .video-container {
        height: 100vh;
    }
    
    video {
        height: 100vh;
    }
    
    .text-content {
        padding: 25px 15px;
    }
 .color-circle {
        width: 30px;
        height: 30px;
    }
    
    .color-palette {
        gap: 10px;
        margin: 12px 0;
    }
     .calendar-header {
        font-size: 14px;
        font-weight: 600;
    }
    
    .calendar-grid {
        gap: 4px;
        padding: 0 10px;
        font-size: 12px;
    }
    
    .weekday {
        padding: 6px 0;
        font-size: 10px;
        font-weight: 600;
    }
    
    .day {
        border-radius: 4px;
        font-weight: 500;
    }
    
    .wedding-day {
        font-weight: 700;
    }
    
    .date-main {
        font-size: 22px;
        font-weight: 400;
    }   
 .example-photos {
        gap: 30px;
    }
    

    .photo-item .color-circle {
        width: 28px;
        height: 28px;
    }
    
    .palette-container {
        margin-bottom: 10px;
    }

}

/* Особые случаи для разных устройств */
/* iPhone Safe Areas */
@supports (padding: max(0px)) {
    @media (max-width: 768px) {
        .video-wrapper {
            padding-top: env(safe-area-inset-top);
            padding-bottom: env(safe-area-inset-bottom);
        }
    }
}

/* Высокие устройства */
@media (max-width: 768px) and (max-height: 700px) {
    .video-wrapper {
        height: 100vh;
    }
    
    video {
        height: 100vh;
    }
}

/* Планшеты */
@media (min-width: 769px) and (max-width: 1024px) {
    .video-wrapper {
        flex: 0 0 auto;
    }
    
    .video-container {
        max-width: 500px;
        height: 70vh;
    }
    
    video {
        max-height: 70vh;
        height: auto;
    }
    
    .text-content {
        flex: 0 0 400px;
        max-width: 400px;
        padding: 25px;
    }
}
/* Адаптивность для примеров нарядов */
@media (max-width: 768px) {
    .example-photos {
        gap: 20px;
    }
    
    .photo-item {
        max-width: 350px;
    }
    
    .photo-item img {
        max-height: 400px;
    }
}

@media (max-width: 480px) {
    .example-photos {
        gap: 15px;
    }
    
    .photo-item {
        max-width: 300px;
    }
    
    .photo-item img {
        max-height: 350px;
    }
    
    .dresscode-examples {
        margin: 20px 0;
    }
}

/* Для очень маленьких экранов */
@media (max-width: 360px) {
    .photo-item {
        max-width: 280px;
    }
    
    .photo-item img {
        max-height: 320px;
    }
}