/* GIF Grid Block - Grid 3x3 z animacjami GIF */

.gif-grid-section {
    position: relative;
    padding: 89px 0;
    background: radial-gradient(120% 160% at 50% 0%, #20262F 0%, #050608 50%, #000000 100%);
    overflow: hidden;
}

.gif-grid-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 18px;
    border: 20px solid #000000;
    border-radius: 30px;
    background: #fff;
    overflow: hidden;
}

.gif-grid {
    display: flex;
    flex-direction: column;
    gap: 19px;
    width: 100%;
}

.gif-grid-row {
    display: grid;
    width: 100%;
}

.gif-grid-row-1 {
    grid-template-columns: 500fr 146fr 146fr 146fr 307fr;
    gap: 19px;
    width: 118%;
    margin: 0 auto;
    position: relative;
    left: 49.4%;
    transform: translateX(-50%);
}

.gif-grid-col-last {
    display: flex;
    flex-direction: column;
    gap: 19px;
}

.gif-grid-row-2 {
    display: grid;
    grid-template-columns: auto auto 52.2% auto;
    gap: 19px;
    align-items: stretch;
}

.gif-grid-row-2 .gif-grid-item {
    height: 100%;
    aspect-ratio: unset;
}

.gif-grid-row-2 .gif-grid-item--ratio-158-328 {
    aspect-ratio: unset;
}

.gif-grid-row-2 .gif-grid-item--ratio-587-328 {
    aspect-ratio: unset;
}

.gif-grid-item--grow {
    width: 100%;
}

.gif-grid-item {
    position: relative;
    width: 100%;
    border: 7.19px solid #D9D9D9;
    border-radius: 22.48px;
    overflow: hidden;
    background: #000;
    box-shadow: 0px 3.6px 10.79px 2.7px #00000026;
}

/* Ratio classes */
.gif-grid-item--ratio-500-294 {
    aspect-ratio: 500 / 294;
}

.gif-grid-item--ratio-146-294 {
    aspect-ratio: 146 / 294;
}

.gif-grid-item--ratio-153-294 {
    aspect-ratio: 153 / 294;
}

.gif-grid-item--ratio-307-81 {
    aspect-ratio: 307 / 81;
}

.gif-grid-item--ratio-307-195 {
    aspect-ratio: 307 / 195;
}

.gif-grid-item--ratio-587-328 {
    aspect-ratio: 587 / 328;
}

.gif-grid-item--ratio-587-294 {
    aspect-ratio: 587 / 294;
}

.gif-grid-item--ratio-329-158 {
    aspect-ratio: 329 / 158;
}

.gif-grid-item--ratio-158-328 {
    aspect-ratio: 158 / 328;
}

.gif-grid-item--ratio-246-144 {
    aspect-ratio: 246 / 144;
}

.gif-grid-item--ratio-80-162 {
    aspect-ratio: 80 / 162;
}

.gif-grid-item-inner {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.gif-grid-media {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Responsive */
@media (max-width: 1024px) {
    .gif-grid-container {
        padding: 0 24px;
    }

    .gif-grid {
        gap: 12px;
    }

    .gif-grid-row-1 {
        gap: 12px;
    }

    .gif-grid-col-last {
        gap: 12px;
    }

    .gif-grid-row-2 {
        gap: 12px;
    }

    .gif-grid-item {
        border: 5px solid #D9D9D9;
        border-radius: 16px;
    }
}

/* Mobile Grid - ukryj na desktop */
.gif-grid-mobile {
    display: none;
}

@media (max-width: 768px) {
    .gif-grid-section {
        padding: 67px 44px;
    }

    .gif-grid-container {
        padding: 0 7px;
        border-top-width: 10px;
        border-bottom-width: 10px;
        margin-bottom: -20px;
        overflow: hidden;
    }

    /* Ukryj desktop grid na mobile */
    .gif-grid-desktop {
        display: none;
    }

    /* Pokaż mobile grid - przesunięty do góry */
    .gif-grid-mobile {
        display: flex;
        flex-direction: column;
        gap: 7px;
        margin-top: -10px;
    }

    /* Wiersze mobile */
    .gif-grid-mobile-row {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 7px;
    }
    
    /* Wiersz 2: 72fr 72fr 155fr, szerokość 110% */
    .gif-grid-mobile-row-2 {
        grid-template-columns: 72fr 72fr 155fr;
        width: 110%;
        margin: 0 auto;
        position: relative;
        left: 0;
    }
    
    /* Wiersz 4: odbicie lustrzane wiersza 2 - 155fr 72fr 72fr, szerokość 110% */
    .gif-grid-mobile-row-4 {
        grid-template-columns: 155fr 72fr 72fr;
        width: 110%;
        margin: 0 auto;
        position: relative;
        left: -10%;
        height: clamp(80px, calc(280px - 200px * (768px - 100vw) / 468px), 280px);
    }
    
    /* Dla zakresu 280-300px: wysokość od 282px do 80px */
    @media (min-width: 280px) and (max-width: 300px) {
        .gif-grid-mobile-row-4 {
            height: clamp(80px, calc(282px - 202px * (100vw - 280px) / 20px), 282px);
        }
    }
    
    .gif-grid-mobile-col-last {
        display: flex;
        flex-direction: column;
        gap: 7px;
    }

    /* Wiersz 1: 2 elementy - ta sama wysokość, zachowują proporcje z desktop */
    .gif-grid-mobile-row-1 {
        grid-template-columns: 235fr 71fr;
        align-items: stretch;
    }
    
    /* Wiersz 3: taki sam układ jak wiersz 1 - 235fr 71fr, szerokość 115% */
    .gif-grid-mobile-row-3 {
        grid-template-columns: 235fr 71fr;
        align-items: stretch;
        width: 115%;
        margin: 0 auto;
        position: relative;
        left: 0;
    }

    .gif-grid-item-mobile-1 {
        aspect-ratio: 500 / 294;
        height: auto;
        width: 100%;
    }

    .gif-grid-item-mobile-2 {
        aspect-ratio: 146 / 294;
        height: auto;
        width: 100%;
    }
    
    /* Wiersz 3 - takie same proporcje jak wiersz 1 */
    .gif-grid-item-mobile-9 {
        aspect-ratio: 587 / 328;
        height: auto;
        width: 100%;
    }
    
    .gif-grid-item-mobile-4-second {
        aspect-ratio: 146 / 294;
        height: auto;
        width: 100%;
    }

    .gif-grid-item {
        border: 3.55px solid #D9D9D9;
        border-radius: 16px;
    }

    /* Pozostałe wiersze - standardowy ratio 16:9 */
    .gif-grid-mobile-row-3 .gif-grid-item,
    .gif-grid-mobile-row-4 .gif-grid-item {
        aspect-ratio: 16 / 9;
    }
    
    /* Wiersz 2 - zachowaj proporcje z desktop */
    .gif-grid-item-mobile-3,
    .gif-grid-item-mobile-4 {
        aspect-ratio: 146 / 294;
    }
    
    .gif-grid-item-mobile-5 {
        aspect-ratio: 307 / 81;
    }
    
    .gif-grid-item-mobile-6 {
        aspect-ratio: 307 / 195;
    }
    
    /* Wiersz 4 - proporcje: z lewej 307/81 i 307/195, z prawej 146/294 i 146/294 */
    .gif-grid-item-mobile-5-row4 {
        aspect-ratio: 307 / 81 !important;
    }
    
    .gif-grid-item-mobile-6-row4 {
        aspect-ratio: 307 / 195 !important;
    }
    
    .gif-grid-item-mobile-4-row4 {
        aspect-ratio: 146 / 294 !important;
    }
    
    .gif-grid-item-mobile-3-row4 {
        aspect-ratio: 146 / 294 !important;
    }
}

@media (max-width: 480px) {
    .gif-grid-section {
        padding: 30px 30px;
    }

    .gif-grid-container {
        padding: 0 7px;
        border-width: 15px;
        border-radius: 20px;
    }

    .gif-grid-mobile {
        gap: 7px;
    }

    .gif-grid-mobile-row {
        gap: 7px;
    }

    .gif-grid-item {
        border: 4px solid #D9D9D9;
        border-radius: 12px;
    }
}