/* ----------------------------------------------------------------
    Start Basics
-----------------------------------------------------------------*/
*,
*::after,
*::before {
  margin: 0;
  padding: 0;
  box-sizing: inherit; 
}

html {
  box-sizing: border-box;
  font-size: 65%; 
}

body {
  font-family: "Nunito", sans-serif;
  color: #333;
  font-weight: 300;
  line-height: 1.6; 
}

.container {
  width: 65%;
  margin: 2rem auto; 
}

.gallery {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  grid-template-rows: repeat(250, 5vw);
  grid-gap: 1.5rem; 
}

.gallery__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block; 
}

.gallery__item--1 {
  grid-column-start: 1;
  grid-column-end: 8;
  grid-row-start: 1;
  grid-row-end: 10;

  /** Alternative Syntax **/
  /* grid-column: 1 / span 2;  */
  /* grid-row: 1 / span 2; */
}

.gallery__item--2 {
  grid-column-start: 1;
  grid-column-end: 8;
  grid-row-start: 10;
  grid-row-end: 20;

  /** Alternative Syntax **/
  /* grid-column: 1 / span 2;  */
  /* grid-row: 10 / span 2; */
}

.gallery__item--3 {
  grid-column-start: 1;
  grid-column-end: 8;
  grid-row-start: 20;
  grid-row-end: 30;

  /** Alternative Syntax **/
  /* grid-column: 1 / span 4;
  grid-row: 20 / span 5; */
}

.gallery__item--4 {
  grid-column-start: 1;
  grid-column-end: 8;
  grid-row-start: 30;
  grid-row-end: 40;

  /** Alternative Syntax **/
  /* grid-column: 1 / span 4;  */
  /* grid-row: 30 / span 3; */
}

.gallery__item--5 {
  grid-column-start: 1;
  grid-column-end: 8;
  grid-row-start: 40;
  grid-row-end: 50;

  /** Alternative Syntax **/
  /* grid-column: 1 / span 4; */
  /* grid-row: 40 / span 3; */
}

.gallery__item--6 {
  grid-column-start: 1;
  grid-column-end: 8;
  grid-row-start: 50;
  grid-row-end: 60;

  /** Alternative Syntax **/
  /* grid-column: 1 / span 4; */
  /* grid-row: 50 / span 3; */
}

.gallery__item--7 {
  grid-column-start: 1;
  grid-column-end: 8;
  grid-row-start: 60;
  grid-row-end: 70;

  /** Alternative Syntax **/
  /* grid-column: 1 / span 2;  */
  /* grid-row: 60 / span 2; */
}

.gallery__item--8 {
  grid-column-start: 1;
  grid-column-end: 8;
  grid-row-start: 70;
  grid-row-end: 80;

  /** Alternative Syntax **/
  /* grid-column: 1 / span 2;  */
  /* grid-row: 70 / span 2; */
}

.gallery__item--9 {
  grid-column-start: 1;
  grid-column-end: 8;
  grid-row-start: 80;
  grid-row-end: 90;

  /** Alternative Syntax **/
  /* grid-column: 1 / span 4;
  grid-row: 80 / span 5; */
}

.gallery__item--10 {
  grid-column-start: 1;
  grid-column-end: 8;
  grid-row-start: 90;
  grid-row-end: 100;

  /** Alternative Syntax **/
  /* grid-column: 1 / span 4;  */
  /* grid-row: 90 / span 3; */
}

.gallery__item--11 {
  grid-column-start: 1;
  grid-column-end: 8;
  grid-row-start: 100;
  grid-row-end: 110;

  /** Alternative Syntax **/
  /* grid-column: 1 / span 4; */
  /* grid-row: 100 / span 3; */
}

.gallery__item--12 {
  grid-column-start: 1;
  grid-column-end: 8;
  grid-row-start: 110;
  grid-row-end: 120;

  /** Alternative Syntax **/
  /* grid-column: 1 / span 4; */
  /* grid-row: 110 / span 3; */
}

.gallery__item--13 {
  grid-column-start: 1;
  grid-column-end: 8;
  grid-row-start: 120;
  grid-row-end: 130;

  /** Alternative Syntax **/
  /* grid-column: 1 / span 2;  */
  /* grid-row: 120 / span 2; */
}

.gallery__item--14 {
  grid-column-start: 1;
  grid-column-end: 9;
  grid-row-start: 130;
  grid-row-end: 140;

  /** Alternative Syntax **/
  /* grid-column: 1 / span 2;  */
  /* grid-row: 130 / span 2; */
}

.gallery__item--15 {
  grid-column-start: 1;
  grid-column-end: 8;
  grid-row-start: 140;
  grid-row-end: 150;

  /** Alternative Syntax **/
  /* grid-column: 1 / span 4;
  grid-row: 140 / span 5; */
}

.gallery__item--16 {
  grid-column-start: 1;
  grid-column-end: 8;
  grid-row-start: 150;
  grid-row-end: 160;

  /** Alternative Syntax **/
  /* grid-column: 1 / span 4;  */
  /* grid-row: 150 / span 3; */
}

.gallery__item--17 {
  grid-column-start: 1;
  grid-column-end: 8;
  grid-row-start: 160;
  grid-row-end: 170;

  /** Alternative Syntax **/
  /* grid-column: 1 / span 4; */
  /* grid-row: 160 / span 3; */
}

.gallery__item--18 {
  grid-column-start: 1;
  grid-column-end: 8;
  grid-row-start: 170;
  grid-row-end: 180;

  /** Alternative Syntax **/
  /* grid-column: 1 / span 4; */
  /* grid-row: 170 / span 3; */
}

.gallery__item--19 {
  grid-column-start: 1;
  grid-column-end: 8;
  grid-row-start: 180;
  grid-row-end: 190;

  /** Alternative Syntax **/
  /* grid-column: 1 / span 2;  */
  /* grid-row: 180 / span 2; */
}

.gallery__item--20 {
  grid-column-start: 1;
  grid-column-end: 8;
  grid-row-start: 190;
  grid-row-end: 200;

  /** Alternative Syntax **/
  /* grid-column: 1 / span 2;  */
  /* grid-row: 190 / span 2; */
}

.gallery__item--21 {
  grid-column-start: 1;
  grid-column-end: 8;
  grid-row-start: 200;
  grid-row-end: 210;

  /** Alternative Syntax **/
  /* grid-column: 1 / span 4;
  grid-row: 200 / span 5; */
}

.gallery__item--22 {
  grid-column-start: 1;
  grid-column-end: 8;
  grid-row-start: 210;
  grid-row-end: 220;

  /** Alternative Syntax **/
  /* grid-column: 1 / span 4;  */
  /* grid-row: 210 / span 3; */
}

.gallery__item--23 {
  grid-column-start: 1;
  grid-column-end: 8;
  grid-row-start: 220;
  grid-row-end: 230;

  /** Alternative Syntax **/
  /* grid-column: 1 / span 4; */
  /* grid-row: 220 / span 3; */
}

.gallery__item--24 {
  grid-column-start: 1;
  grid-column-end: 8;
  grid-row-start: 230;
  grid-row-end: 240;

  /** Alternative Syntax **/
  /* grid-column: 1 / span 4; */
  /* grid-row: 230 / span 3; */
}

.gallery__item--25 {
  grid-column-start: 1;
  grid-column-end: 8;
  grid-row-start: 240;
  grid-row-end: 250;

  /** Alternative Syntax **/
  /* grid-column: 1 / span 2;  */
  /* grid-row: 240 / span 2; */
}