.c-photo-grid {
  width: 100%;
  max-width: 2200px;
  margin: auto;
}

.c-photo-grid__scaler {
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 300%;

  @include mq(550) {
    padding-bottom: 125%;
  }

  @include mq(1000) {
    padding-bottom: 35%;
  }
}

.c-photo-grid__placeholder {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}

.c-photo-grid__grid {
  position: absolute;
  display: grid;
  height: 100%;
  width: 100%;
  grid-template-rows: 3fr 2fr 2fr 3fr;
  grid-template-columns: 1fr;
  grid-gap: 4px;
  grid-template-areas:
    "p1"
    "p2"
    "p3"
    "p4";

  @include mq(550) {
    grid-template-rows: 1fr 1fr 1fr 1fr;
    grid-template-columns: 1fr 1fr;
    grid-gap: 4px;
    grid-template-areas:
      "p1 p2"
      "p1 p3"
      "p5 p4"
      "p6 p4";
  }

  @include mq(1000) {
    grid-template-rows: 1fr 1fr;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-gap: 4px;
    grid-template-areas:
    "p1 p2 p4 p5"
    "p1 p3 p4 p6";
  }
}

.c-photo-grid__item {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: 20px;
  text-decoration: none;
  &[data-position="1"] { grid-area: p1; }
  &[data-position="2"] { grid-area: p2; }
  &[data-position="3"] { grid-area: p3; }
  &[data-position="4"] { grid-area: p4; }
  &[data-position="5"] { grid-area: p5; }
  &[data-position="6"] { grid-area: p6; }

  &:before {
    content: '';
    position: absolute;
    z-index: 2;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    background: palette(neutral, 1000);
    //background: black;
    transform-origin: 0 0;
    opacity: 0;
    transition-property: opacity;
    transition-timing-function: linear;
    transition-duration: 0.25s;
  }

  @include mq($max: 550) {
    &[data-position="5"] { display: none; }
    &[data-position="6"] { display: none; }
    &:before {
      opacity: 0.5;
    }
  }

  &:hover {
    &:before {
      opacity: 0.5;
    }
  }
}

.c-photo-grid__text {
  position: relative;
  z-index: 2;
  text-align: center;
  color: white;
  transform-origin: 50% 0%;
  transform: scale3d(1.2, 1.4, 1);
  opacity: 0;
  transition: transform 0.3s ease-in-out, opacity 0.3s;

  @include mq($max: 550) {
    transform: scale3d(1,1,1);
    opacity: 1;
  }

  .c-photo-grid__item:hover & {
    transform: scale3d(1,1,1);
    opacity: 1;
  }
}

.c-photo-grid__image {
  position: absolute;
  z-index: 1;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  transform: scale3d(1,1,1);
  transition-property: filter, transform;
  transition-timing-function: linear;
  transition-duration: 0.3s;
  transition: filter 0.3s linear, transform 0.6s cubic-bezier(.25,.7,.65,.9);

  @include mq($max: 550) {
    filter: blur(0.8px);
    transform: scale3d(1, 1, 1);
  }

  .c-photo-grid__item:hover & {
    filter: blur(0.8px);
    transform: scale3d(1.08, 1.08, 1);
  }
}

.c-photo-grid__name {
  font-size: 1.5rem;
  line-height: 1.2;
  margin-bottom: space(2);

  @include mq(1350) {
    font-size: 1.8rem;
  }
}