/*
  Desktop galleries page layout.
  Shared chrome, page title, link, video, and fade styles live in site_global.css.
*/

:root {
  --page-min: 900px;
  --content-max: 1250px;
  --content-side-gap: 61px;
  --cell-width: 276px;
  --grid-column-gap: 46px;
  --grid-row-gap: 67px;
}

html,
body {
  min-width: var(--page-min);
}

body {
  overflow-x: auto;
}

.content {
  width: min(var(--content-max), calc(max(100vw, var(--page-min)) - (var(--content-side-gap) * 2)));
  margin: 0 auto;
  padding-bottom: 160px;
}

.hero {
  padding-top: 173px;
}

.placeholder {
  margin-top: 89px;
  background: var(--site-video-bg);
}

.placeholder video {
  width: 100%;
  height: auto;
  background: var(--site-video-bg);
}

.intro {
  width: min(1245px, 100%);
  margin-top: 50px;
  color: #b2b2b2;
  font-family: var(--site-font-body);
  font-size: 14px;
  font-style: normal;
  font-weight: 300;
  line-height: 24px;
  letter-spacing: 0;
  text-align: left;
  text-transform: none;
}

.intro p {
  margin: 0;
}

.gallery-groups {
  margin-top: 90px;
}

.gallery-group {
  position: relative;
}

.gallery-group + .gallery-group {
  margin-top: 120px;
}

.gallery-group__title {
  margin: 0;
  color: #b2b2b2;
  font-family: var(--site-font-body);
  font-size: 20px;
  font-weight: 300;
  line-height: 24px;
  letter-spacing: 0;
  text-align: left;
  text-transform: uppercase;
}

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(2, var(--cell-width));
  column-gap: var(--grid-column-gap);
  row-gap: var(--grid-row-gap);
  justify-content: start;
  margin-top: 38px;
  position: relative;
  contain: layout;
}

.gallery-cell {
  width: var(--cell-width);
  max-width: 100%;
  border-top: 1px solid var(--site-line-muted);
}

.gallery-cell img {
  width: 100%;
  height: auto;
}

.gallery-cell__text {
  margin-top: 0;
  font-family: var(--site-font-body);
  font-style: normal;
  font-weight: 400;
  letter-spacing: 0;
  text-align: left;
}

.gallery-cell__details {
  margin: 0;
  color: var(--site-contact-muted);
  font-size: 12px;
  line-height: 24px;
}

.gallery-cell__location {
  margin: 25px 0 0;
  color: var(--site-gold);
  font-size: 11px;
  line-height: 14px;
  letter-spacing: 0.01em;
  text-transform: uppercase;
}

.gallery-cell__details a,
.gallery-cell__location a {
  color: inherit;
  text-decoration: none;
}

/* 3 columns need 3*276 + 2*46 = 920px content width, plus 122px gutters. */
@media (min-width: 1042px) {
  .gallery-grid {
    grid-template-columns: repeat(3, var(--cell-width));
  }
}

/* 4 columns need 4*276 + 3*46 = 1242px content width, plus 122px gutters. */
@media (min-width: 1364px) {
  .gallery-grid {
    grid-template-columns: repeat(4, var(--cell-width));
  }
}