:root {
  --grid-square: repeat(2,minmax(0,1fr));
  --grid-vertical: repeat(3,minmax(0,1fr));
}

.now__section--header {
  margin: var(--sizing-3xl) 0 var(--sizing-lg);
}

.media__grid {
  display: grid;
  gap: var(--sizing-sm);
}

.media__grid.square {
  grid-template-columns: var(--grid-square);
}

.media__grid.vertical {
  grid-template-columns: var(--grid-vertical);
}

.media__grid .item__wrapper {
  position: relative;
}

.media__grid .item__wrapper.shadow picture::after {
  position: absolute;
  z-index: 1;
  content: '';
  top: 0;
  left: 1px;
  border-radius: calc(var(--rounded-md) * .85);
  box-shadow: inset 0 -70px 50px -40px #000;
  width: 100%;
  height: calc(100% - 1px);
}

.media__grid a:hover img,
.media__grid a:focus img,
.media__grid a:active img {
  border-color: var(--accent-color-hover)
}

.media__grid .item__meta-text {
  position: absolute;
  z-index: 2;
  padding: 0 var(--sizing-sm);
  bottom: var(--sizing-sm);
  width: 100%;
  box-sizing: border-box;
}

.media__grid .item__meta-text .header,
.media__grid .item__meta-text .subheader {
  color: var(--color-lightest);
  font-size: var(--font-size-xs);
  line-height: var(--line-height-xs);
  text-shadow: rgba(0, 0, 0, 0.7) 0px 0px 10px;
}

.media__grid .item__meta-text .header {
  font-weight: var(--font-weight-bold);
}

.media__grid img {
  border: 1px solid var(--accent-color);
  border-radius: var(--rounded-md);
  transition-property: border-color;
  transition-timing-function: var(--transition-ease-in-out);
  transition-duration: 300ms;
}

.media__grid.square img {
  width: 100%;
  height: 100%;
}

.media__grid.vertical img {
  width: 100%;
  height: auto;
}

.media__grid .item__wrapper picture {
  width: 100%;
  height: 100%;
  position: relative;
  display: flex;
}

@media screen and (min-width: 768px) {
  :root {
    --grid-square: repeat(4,minmax(0,1fr));
    --grid-vertical: repeat(6,minmax(0,1fr));
  }
}