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

.text1article { grid-area: txt; }
.phcol { grid-area: phcol; }
.txcol { grid-area: txcol; }
    
/*=========photo=========*/
.ph1 { grid-area: ph1; }
.ph2 { grid-area: ph2; }
.ph3 { grid-area: ph3; }
.ph4 { grid-area: ph4; }
.ph5 { grid-area: ph5; }

.phcol { 
    display: grid;
    gap: 2rem;
    grid-template-columns: 1fr 1fr;
    grid-template-areas: 
    "ph1 ph1"
    "ph2 ph2";
    }

.txcol { 
    display: grid;
    gap: 2rem;
    grid-template-columns: repeat(3, 1fr);
    grid-template-areas: 
    "ph5 ph3 ph4"
    "txt txt txt";
    }

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

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

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

/* ==============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:
    "ph1 ph1"
    "txt txt"
    "ph2 ph2"
    "ph3 ph4";
    padding: 0 5vw;
    margin-bottom: 2rem;
    }
    
.ph5 { display: none; }

.ph1 { margin-top: 10vw; margin-bottom: 3vw; }
    
.text1article { padding-bottom: 10vw; }
    
.ph3, .ph4 { margin-bottom: 7vw; }
    
.ph2 { margin-top: 3vw; }

}