.grid-one {
    display: grid;
    grid-template-columns: repeat(5, 1fr); 
    gap: 2rem;
    align-items: start; 
    grid-template-areas: 
    "uphcol txt1 txt1 txt2 txt2";
    margin-bottom: 2rem;
    }

.text1article { grid-area: txt1; }
.text2article { grid-area: txt2; }

/*===upper photo column===*/
.uphcol { grid-area: uphcol; }

/*=======upper photo=======*/
.uph1 { grid-area: uph1; }
.uph2 { grid-area: uph2; }

/*=======all photo columns=======*/
.all-phcol {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    }

.grid-two {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 2rem;
    align-items: start;
    grid-template-areas: 
    "lphcol1 txt3 txt3 lphcol2 lphcol3"; 
    }

.text3summary { grid-area: txt3; }

/*===lower photo column===*/
.lphcol1 { grid-area: lphcol1; }
.lphcol2 { grid-area: lphcol2; }
.lphcol3 { grid-area: lphcol3; }

/*=======lower photo=======*/
.lph1 { grid-area: lph1; } 
.lph2 { grid-area: lph2; }
.lph3 { grid-area: lph3; } 
.lph4 { grid-area: lph4; }
.lph5 { grid-area: lph5; } 
.lph6 { grid-area: lph6; }

.photo, .photo1x2 {
    position: relative;
    overflow: hidden;
    width: 100%;
    margin: 0;
    cursor: default;
    user-select: none;
    }

.photo {
    aspect-ratio: 1 / 1;
    }

.photo1x2 {
    aspect-ratio: 15 / 32;
    }

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

/*---upper photo columns--*/   
.grid-one .uphcol {
    display: contents;
    }
/*----all photo columns---*/   
.all-phcol {
    display: contents;
    }

.grid-one {
    grid-template-columns: 1fr 1fr;
    gap: 4vw;
    grid-template-areas:
    "uph1 uph1"
    "uph2 uph2"
    "txt1 txt1"
    "txt2 txt2";
    padding: 0 5vw;
    }
    
.uph1 {
    aspect-ratio: 25 / 34;
    }

.uph1 {
    margin-top: 10vw;
    }
    
.uph2 {
    aspect-ratio: 3 / 2;
    margin-bottom: 4vw;
    }
    
.grid-two {
    grid-template-columns: 1fr 1fr;
    gap: 4vw;
    grid-template-areas:
    "lph3  lph4"
    "lph5  lph6"
    "txt3  txt3"
    "lph1  lph2";
    padding: 0 5vw;
    }
    
.lph1, .lph2 {
    margin-top: 3vw;
    margin-bottom: 7vw;
    }
    
.lph3, .lph4 { margin-top: 4vw; }
.lph5, .lph6  { margin-bottom: 4vw; }

}