@media (max-width:1023px) {
    .desktop {
        display: none;
    }
    .grid-text {
        position: absolute;
        top: 3%;
        width: 100%;
        left: 28px;
    }
}

@media screen and (min-width:1024px) {
    .container {
        font-family: 'Poppins';
    }

    .mobile {
        display: none;
    }

    .video {
        width: 100vw;
        max-height: 50vw;
    }

    .header-grid {
        position: relative;
    }

    .description-grid-left {
        margin-left: 4%;
        max-width: 45%;
        float: left;
        display: flex;
        flex-direction: column;
        justify-content: center;
        /* margin-top: 8rem; */
    }

    .description-grid-right {
        margin-right: 4%;
        max-width: 35%;
        float: right;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        /* margin-top: 8rem; */
    }

    .footer {
        background-color: #000;
        position: absolute;
        width: 100vw;
        padding-top: 50px;
        padding-bottom: 90px;
        /* margin-top: 6%; */
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
    }



    .footer-light-information {
        color: #FFFFFF;
        font-weight: 500;
        font-size: 24px;
        line-height: 40px;
        margin-right: 20%;
    }

    .footer-left {
        padding-top:5rem;
        margin-left: 10%;
    }

    .image-desktop {
        max-width: 900px;
        max-height: 850px;
        transform: scale(0.8, 0.8);
    }

    .grid-container {
        position: relative;
        width: 100vw;
        height: 750px;
        max-width: 100%;
        max-height: 100%;
        overflow: hidden;
        align-items: center;
    }

    .card-container {
        padding: 2px 16px;
    }

    .grid-3 {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: repeat(2, 1fr);
        gap: 15px;
        margin-left: 10%;
        margin-right: 10%;
    }

    .card {
        text-align: left;
    }

    .card img {
        max-width: 100%;
        height: auto;
    }

    .cover {
        width: 100%;
        height: 100%;
        object-fit: cover;
        align-items: center;
        justify-content: center;
    }

    .partners {
        /*display: flex;
        align-items: center;*/
        gap: 10px;
        padding-top:30px;
    }

    .heightx {
        height: 200px;
    }

    .margin-volvo {
        margin-top: 10px;
        margin-bottom: 20px;
        max-width: 100%;
    }

    a {
        color: black;
    }
	
	.header-grid a{
		color:white;
	}

    .information-text {
        position: absolute;
        margin-top: 90vw;
        z-index: 1;
        margin-left: 5%;
    }

    .product-font-light {
        font-weight: 400;
        font-size: 11px;
        line-height: 20px;
        color: #000;
    }

    .product-specification {
        font-weight: 400;
        font-size: 12px;
        line-height: 24px;
        color: #000;
    }

    .year-production {
        font-size: 12px;
        font-weight: 700;
        line-height: 23px;
        margin-top: 30px;
        margin-bottom: 30px;
    }

    .product-font-bold {
        color: #000;
        font-weight: 600;
        font-size: 20px;
        letter-spacing: 4%;
        line-height: 40px;
        }

    .td-bold {
        font-weight: 600;
        font-size: 12px;
        line-height: 23px;
        text-align: right;
    }

    .table-specification {
        width: 25%;
    }

    .td-justify {
        font-weight: 400;
        font-size: 12px;
        line-height: 23px;
        text-align: left;
    }

    .product-name {
        color: #000;
        font-weight: 600;
        font-size: 20px;
        letter-spacing: 4%;
        line-height: 40px;
    }

    .sus {
        max-height: 30rem;
    }

    .gradient {
        position: relative;

    }

    .gradient::before {
        position: absolute;
        content: "";
        background-color: rgba(255, 255, 255, 0.85);
        width: 100%;
        height: 100%;
        text-align: center;
        justify-content: center;
        align-items: center;
    }

    .gradient-text {
        margin-left: 3rem;
        position: absolute;
        color: black;
        top: 35%;
        width: 100%;
    }

    .heightzz{
        height: 30rem;
    }

    .image-opacity {
        width: 100%;
    }

    .background-image {
        height: 500px;
        overflow: hidden;
    }

    #galleryOverlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.9);
        z-index: 999;
        display: flex;
        justify-content: center; /* Wyśrodkowanie w poziomie */
        align-items: center; /* Wyśrodkowanie w pionie */
    }
    
    #galleryImage {
        max-width: 80%; /* Dostosuj maksymalną szerokość obrazu do 80% dostępnej przestrzeni */
        max-height: 80%; /* Dostosuj maksymalną wysokość obrazu do 80% dostępnej wysokości galerii */
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%); /* Wyśrodkowanie obrazu w poziomie i pionie */
    }


    .gallery-controls {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        width: 100%;
        display: flex;
        justify-content: space-between;
        padding: 0 20px;
        box-sizing: border-box;
    }

    .close-button {
        position: absolute;
        top: 10px;
        right: 10px;
        color: white;
        font-size: 24px;
        cursor: pointer;
    }

    .gallery-controls button {
        background-color: transparent;
        border: none;
        color: white;
        font-size: 24px;
        cursor: pointer;
        outline: none;
    }

    .padding90 {
        padding-left: 4%;
    }

    .index-container {
        /* width: 100vw; */
        max-width: 100%;
        /* height: 300px; */
        display: flex;
        margin-bottom: 5%;
        position: relative;
        margin-top: 5%;
    }

    .right {
        float: right;
        width: 50%;
        height: auto;
        /* margin-left: 5%; */
        /* margin-right: 8%; */
        padding-left: 5%;
        padding-right: 10%;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        
    }

    .left {
        float: left;
        width: 50%;
        height: auto;
        /* margin-left: 8%; */
        padding-left: 8%;
        padding-right: 15%;
        /* margin-right: 5%; */
        display: flex;
        justify-content: flex-start;
        align-items: center ;
        
    }

    .left-image {
        width: 80%;
        height: auto;
        overflow: hidden;
    }

    .right-image {
        /* width: 60%;
        height: auto; */
        overflow: hidden;
    }


    .image-left {
        float: left;
        object-fit: cover;
        height: 100%;
        z-index: 1;
    }

    .image-right {
        float: right;
        object-fit: cover;
        height: 100%;
        z-index: 1;
    }

    .grid.container2 {
        display: flex; /* Ustawienie kontenera na flexbox */
        flex-direction: column; /* Układanie elementów w kolumnie */
        align-items: flex-start; /* Wyrównanie do lewej strony */
        margin-left: 6%; /* Ustawienie marginesu z lewej strony */
    }
    
    .grid.container .flex-top {
        order: 1; /* Ustawienie bloku 1 na górze */
    }
    
    .grid.container .flex-bottom {
        order: 2; /* Ustawienie bloku 2 na dole */
    }

/* Resetowanie domyślnego stylu dla obrazków */
.gallery-line{
    margin: 0;
    padding: 0;
    border: none;
    object-fit: cover;
    object-position: center left; /* Pozycja obrazka w kontenerze */
}


.leftgall img{
    height: 100%;
    width:100%
}

.centergall img{
    height: 100%;
    width:100%
}

.centergall video{
    height: 100%;
    width:100%
}

.rightgall img{
    height: 100%;
    width:100%
}



/* Styl kontenera obrazków */
.image-container, .image-container2 {
    display: flex; /* Ustawiamy kontener jako flexbox */
    justify-content: space-between; /* Rozdzielamy miejsce między obrazkami */
    gap: 3%;
    margin-bottom:3%;
    width: 100%;
}

/* Szerokość obrazków w zależności od pozycji */
.image-container div:first-child,
.image-container div:last-child {
    width: 40vw; /* Ustawiamy szerszą szerokość dla obrazków na bokach */
    height: 20vw;
}

.image-container div:nth-child(2) {
    width: 25vw; /* Ustawiamy węższą szerokość dla środkowego obrazka */
    height: 20vw;
}

/* Szerokość obrazków w zależności od pozycji */
.image-container2 div:nth-child(2),
.image-container2 div:last-child {
    width: 40vw; /* Ustawiamy szerszą szerokość dla obrazków na bokach */
    height: 20vw;
}

.image-container2 div:first-child {
    width: 25vw; /* Ustawiamy węższą szerokość dla środkowego obrazka */
    height: 20vw
}


#galleryImage {
    max-width: 80%; /* Dostosuj maksymalną szerokość obrazu do 80% dostępnej przestrzeni */
    max-height: 80%; /* Dostosuj maksymalną wysokość obrazu do 80% dostępnej wysokości galerii */
    /* Nie potrzebujemy display: inline-block; ani vertical-align: middle; */
}

.product-line {
    margin: 0 auto; /* Wyśrodkowanie kontenera */
    display: flex; /* Użyj flexboxa */
    flex-wrap: wrap; /* Pozwól na zawijanie elementów na nowy wiersz */
    justify-content: left;
    gap: 0.94rem;
    width:85%;
}

.product-item {
    width: calc(33.33% - 10px); /* Szerokość jednego bloku - odstęp */
    margin-bottom: 20px; /* Odstęp między blokami */
    box-sizing: border-box;
    align-items: center;
}

.product-item:hover .overlay-image {
    display: block;
}

.product-item img {
    max-width: 100%;
    max-height: 470px;
    aspect-ratio: 3/2;
}

.imagecard {
    position: relative;
    background-size: cover;
    /* Wyśrodkowanie zawartości w poziomie */
}

.overlay-image {
    position: absolute;
    top: 50%;
    /* Przesunięcie do środka w pionie */
    left: 50%;
    /* Przesunięcie do środka w poziomie */
    transform: translate(-50%, -50%);
    /* Wyśrodkowanie */
    z-index: 2;
    display: none;
    width: 10%;
}


.product-description {
    text-align: left;
    padding-left: 3%;
}

.card-bold {
    font-weight: 600;
    font-size: 20px;
    line-height: 62px;
}

.card-light {
    font-weight: 500;
    font-size: 16px;
    line-height: 25px;
}

.description-container {
    display: flex;
    flex-direction: column;
}

.info-row {
    margin-bottom: -5px; /* Dodaje odstęp między liniami */
}

}