.backdrop {
  box-sizing: border-box;
  padding: 1rem;
  background: var(--bg);
}

.photos-backround {
  box-sizing: border-box;
  padding: 2rem;
  padding-top: 0.6rem;
  background: white;
  border: 7px solid var(--accent);
  border-radius: 1rem;
}

/* with flexbox */
.grid {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}

.grid-col {
  -webkit-box-flex: 1;
  -webkit-flex-grow: 1;
  -ms-flex-positive: 1;
  flex: 1;
  flex-grow: 1;
  margin-right: 2rem;
}

.grid-col:last-child {
  margin-right: 0;
}

/* 1 columns by default, hide columns 1, 2 & 3 */
.grid-col--1, .grid-col--2, .grid-col--3 { display: none }

/* 2 columns at small size */
@media ( min-width: 800px ) {
  .grid-col--1 { display: block; } /* show column 1 */
}

/* 3 columns at medium size */
@media ( min-width: 1200px ) {
  .grid-col--2 { display: block; } /* show column 2 */
}

/* 4 columns at large size */
@media ( min-width: 1600px ) {
  .grid-col--3 { display: block; } /* show column 3 */
}

.grid-item {
  margin-bottom: 2rem;
  display: block;
  box-sizing: border-box;
  overflow: hidden;
}

.grid-item img {
  width: 100%;
  height: auto;
  display: block;
}