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

.text1article { grid-area: txt; }
.phcol { grid-area: phcol; }

/*=========photo=========*/
.ph1 { grid-area: ph1; }
.ph2 { grid-area: ph2; }
.ph3 { grid-area: ph3; }
.ph4 { grid-area: ph4; }
.ph5 { grid-area: ph5; }
.ph6 { grid-area: ph6; }
.ph7 { grid-area: ph7; }
.ph8 { grid-area: ph8; }
.ph9 { grid-area: ph9; }

.map { grid-area: map; }

/*=====photo column=====*/
.phcol {
    display: grid;
    gap: 2rem;
    grid-template-columns: repeat(3, 1fr);
    grid-template-areas: 
    "ph1 ph2 ph3"
    "map map map"
    "ph4 ph5 ph6"
    "ph7 ph8 ph9";
    margin: 0;
    padding: 0;
    }

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

.photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    }
/*--------------MAIN GRID END--(DESKTOP)------------*/

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

/* ===============MEDIA QUERIES MOBILE============== */
/* ===============MEDIA QUERIES MOBILE============== */
@media (max-width: 768px) {
/*------------------MAIN GRID--(MOBILE)----------------*/ 
.phcol {
    display: contents;
    } 
    
.grid-container {
    display: grid;
    gap: 4vw;
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
    "ph1 ph2"
    "txt txt"
    "map map"
    "ph4 ph5"
    "ph6 ph7"
    "ph8 ph9";
    padding: 0 5vw;
    margin-bottom: 2rem;
    }
    
.map { 
    width: 100vw;
    margin-left: -5vw;
    margin-right: -5vw;
    margin-top: 3vw;
    }
    
.ph3 { display: none; }
    
.ph1, .ph2 { margin: 10vw 0 3vw 0 }
    
.ph8, .ph9 { margin-bottom: 7vw; }
    
.ph4, .ph5 { margin-top: 3vw; }
    
.text1article { padding-bottom: 10vw; }

}
