*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.body{
    background-color: #F7F7F7;
    position: relative;
}

:root{
  --barka-blue: #1B3350;
  --light-blue: #C7D7DF;
  --text-black: #111;
}







/* gallary section */

.gallery_photo{
    margin-top: 10rem;
}
.gallery_section{
  background: #fff;
  /* padding: 16rem 0 9rem;    */
    padding: 220px 0 120px; /* works with fixed navbar */
}

/* This centers ALL content like figma */
.gallery_photo_title,
.gallery_photo_grid{
  width: min(1200px, calc(100% - 160px));
  /* width: 70%; */
  margin-left: auto;
  margin-right: auto;
}

.gallery_photo_grid{
    margin-bottom: 12rem;
}

.gallery_photo_title{
  font-family: "Raleway", sans-serif;
  font-size: 80px;
  font-weight: 700;
  letter-spacing: 0.5px;
  line-height: 1.02;
  color: #1b3350;
  margin-bottom: 5rem;
  text-align: center;
  margin-top: 12rem;
}

.gallery_photo_grid_item img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 18px;
}

.gallery_photo_grid{
    display: grid;
    gap: 2rem;
    grid-template-columns: repeat(4,1fr);
    grid-template-rows: repeat(12,200px);
    grid-template-areas: 
      "a a b b"
      "a a c d"
      "e e f f"
      "g g h h"
      "i j h h"
      "k k l l"
      "m n o o"
      "p p q q"
      "p p r r"
      "s s t t"
      "u u v v"
      "w x x x";
}

.gp_item_a{
    grid-area: a;
}
.gp_item_b{
    grid-area: b;
}
.gp_item_c{
    grid-area: c;
}
.gp_item_d{
    grid-area: d;
}
.gp_item_e{
    grid-area: e;
}
.gp_item_f{
    grid-area: f;
}
.gp_item_g{
    grid-area: g;
}
.gp_item_h{
    grid-area: h;
}
.gp_item_i{
    grid-area: i;
}
.gp_item_j{
    grid-area: j;
}
.gp_item_k{
    grid-area: k;
}
.gp_item_l{
    grid-area: l;
}

.gp_item_m{ grid-area: m; }
.gp_item_n{ grid-area: n; }
.gp_item_o{ grid-area: o; }
.gp_item_p{ grid-area: p; }
.gp_item_q{ grid-area: q; }
.gp_item_r{ grid-area: r; }
.gp_item_s{ grid-area: s; }
.gp_item_t{ grid-area: t; }
.gp_item_u{ grid-area: u; }
.gp_item_v{ grid-area: v; }
.gp_item_w{ grid-area: w; }
.gp_item_x{ grid-area: x; }
/* .gp_item_y{ grid-area: y; }
.gp_item_z{ grid-area: z; } */


.gallery_photo_grid_item{
    position: relative;
    overflow: hidden;
    border-radius: 18px;
    cursor: pointer;
    transition: transform 0.35s ease, box-shadow 0.35s ease;
}

/* Raised effect */
.gallery_photo_grid_item:hover{
    transform: translateY(-12px);
    box-shadow: 0px 25px 45px rgba(0,0,0,0.18);
}



@media (max-width: 768px){

    .gallery_photo{
        margin-top: 12rem;
    }

  .gallery_photo_title,
  .gallery_photo_grid{
    width: calc(100% - 8rem); /* small side padding */
  }

  .gallery_photo_title{
    font-size: 44px;
    margin-top: 120px;   /* space for fixed navbar */
    margin-bottom: 32px;
  }

  .gallery_photo_grid{
    grid-template-columns: 1fr;
    grid-template-rows: none;
    grid-template-areas: none;   /* IMPORTANT: remove desktop areas */
    gap: 2rem;
    margin-bottom: 8rem;
  }

  .gallery_photo_grid_item{
    grid-area: unset !important; /* reset all gp_item_a... */
    height: 210px;               /* each photo height like mobile mock */
    border-radius: 18px;
  }

  .gallery_photo_grid_item img{
    border-radius: 18px;
  }
}


@media (max-width: 420px){
  .gallery_photo_grid_item{
    height: 190px;
  }

  .gallery_photo_title{
    font-size: 40px;
  }
}




/* ===================================== */
/* GALLERY PHOTO - DESKTOP SCALE TUNE    */
/* makes 100% browser zoom feel lighter  */
/* ===================================== */

:root{
  --gallery-grid-wrap: min(1120px, calc(100% - 80px));
  --gallery-grid-title: clamp(44px, 4.8vw, 64px);
  --gallery-grid-gap: 1.4rem;
  --gallery-grid-row: 170px;
}

@media (min-width: 769px){

  .gallery_section{
    padding: 160px 0 90px;
  }

  .gallery_photo_title,
  .gallery_photo_grid{
    width: var(--gallery-grid-wrap);
  }

  .gallery_photo_title{
    font-size: var(--gallery-grid-title);
    line-height: 1.04;
    margin-top: 7rem;
    margin-bottom: 3rem;
  }

  .gallery_photo_grid{
    gap: var(--gallery-grid-gap);
    grid-template-rows: repeat(12, var(--gallery-grid-row));
    margin-bottom: 8rem;
  }

  .gallery_photo_grid_item,
  .gallery_photo_grid_item img{
    border-radius: 16px;
  }

  .gallery_photo_grid_item:hover{
    transform: translateY(-8px);
    box-shadow: 0 18px 35px rgba(0,0,0,0.14);
  }
}


@media (max-width: 760px){
 .gallery_photo{
   margin-top: 2.94rem; 
 }

 .gallery_photo_title{

font-size: 3.75rem;
font-style: normal;
font-weight: 600;
line-height: normal;
}
}