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

.text1article { grid-area: txt; }
.phcol1 { grid-area: phcol1; }
.phcol2 { grid-area: phcol2; }

/*=========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; }
.ph08 { grid-area: ph08; }
.ph09 { grid-area: ph09; }
.ph10 { grid-area: ph10; }

.phcol1 { 
    display: grid;
    gap: 2rem;
    grid-template-columns: 1fr;
    grid-template-areas: 
    "ph01"
    "ph03"
    "ph05";
    }

.phcol2 { 
    display: grid;
    gap: 2rem;
    grid-template-columns: 1fr;
    grid-template-areas: 
    "ph02"
    "ph04"
    "ph06";
    }

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

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

.photo img, .photo1x2 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) {

.phcol1, .phcol2 {
    display: contents;
    }    
    
.grid-container {
    display: grid;
    gap: 4vw;
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
    "ph01 ph02"
    "txt txt"
    "ph05 ph06"
    "ph03 ph04";
    padding: 0 5vw;
    margin-bottom: 2rem;
    }
    
.ph01, .ph02 { margin-top: 10vw; 
    margin-bottom: 3vw; }

.ph03, .ph04 { margin-bottom: 7vw; }
    
.ph05, .ph06 { margin-top: 3vw; }
    
.text1article p { margin-bottom: 9vw;}
}

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