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

.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;
    }

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

.photo 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-container {
    grid-template-columns: 1fr 1fr;
    gap: 4vw;
    grid-template-areas:
    "uph1 uph2"
    "txt1 txt1"
    "txt2 txt2";
    padding: 0 5vw;
    margin-bottom: 12vw;
    }

.uph1, .uph2 {
    margin-top: 10vw;
    margin-bottom: 3vw;
    }