.grid-container {
    display: grid;
    gap: clamp(5px, 2vw, 29px);
    grid-template-columns: repeat(5, 1fr);
    grid-template-areas: 
    "txcol txcol phcol phcol phcol";
    align-items: start;
    margin-bottom: 2rem;
    }
  
.text1article { grid-area: txt; }
.phcol { grid-area: phcol; }
.txcol { grid-area: txcol; }

/*=========photo=========*/
.ph01 { grid-area: ph01; }
.ph02 { grid-area: ph02; }
.ph03 { grid-area: ph03; }
.ph04 { grid-area: ph04; }
.ph05 { grid-area: ph05; }
.ph06 { grid-area: ph06; }
.ph07 { grid-area: ph07; }
.ph08 { grid-area: ph08; }
.ph09 { grid-area: ph09; }
.ph10 { grid-area: ph10; }

.txcol { 
    display: grid;
    gap: 2rem;
    grid-template-columns: 1fr;
    grid-template-areas: 
    "ph01"
    "txt";
    }

.phcol { 
    display: grid;
    gap: 2rem;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-areas: 
    "ph02 ph03 ph04"
    "ph05 ph06 ph06"
    "ph07 ph08 ph08"
    "ph09 ph10 ph10";
    }


.photo {
    position: relative;
    overflow: hidden;
    width: 100%;
    margin: 0;
    cursor: default;
    user-select: none;
    aspect-ratio: 1 / 1;
    }

.photo2x1 {
    position: relative;
    overflow: hidden;
    width: 100%;
    margin: 0;
    cursor: default;
    user-select: none;
    aspect-ratio: 32 / 15;
    }

.photo img, .photo2x1 img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    }




/*--------------MAIN GRID END--(DESKTOP)------------*/

        
/* ==============MEDIA QUERIES TABLET=============== */
/* ==============MEDIA QUERIES TABLET===============*/
@media (max-width: 991px) { }
    

/* ===============MEDIA QUERIES MOBILE============== */
/* ===============MEDIA QUERIES MOBILE============== */
@media (max-width: 768px) {

.phcol, .txcol {
    display: contents;
    }

.grid-container {
    display: grid;
    gap: 4vw;
    grid-template-columns: 1fr 1fr; 
    grid-template-areas: 
    "ph01 ph01"
    "txt txt"
    "ph02 ph05"
    "ph03 ph07"
    "ph04 ph09"
    "ph06 ph06"
    "ph08 ph08"
    "ph10 ph10";
    padding: 0 5vw;
    }
    
.ph01 { width: 100vw; margin: 10vw -5vw 3vw -5vw; }
    
.ph10 { margin-bottom: 7vw; }
    
.text1article { padding-bottom: 10vw; }
    
.ph02, .ph05 { margin-top: 3vw; }

}
/*----------------MAIN GRID END--(MOBILE)--------------*/