.gpc-masonry__section {
  position: relative;
  overflow: hidden;
  background: var(--neutral-5);
}

.gpc-masonry__section {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 0px 0px;
  grid-template-areas:
    "main-title image content-1 image-2"
    "image-3 content-2 image-4 content-3";
}

@media (min-width: 768px) and (max-width: 992px) {
  .gpc-masonry__section {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(4, 1fr);
    grid-template-areas:
      "main-title image"
      "image-2 content-1"
      "content-2 image-3"
      "image-4 content-3";
  }
}

@media (max-width: 767px) {
  .gpc-masonry__section {
    grid-template-columns: 1fr;
    grid-template-rows: repeat(8, 1fr);
    grid-template-areas:
      "main-title"
      "image"
      "content-1"
      "image-2"
      "content-2"
      "image-3"
      "content-3"
      "image-4";
  }
}

.gpc-masonry__main-title {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  grid-area: main-title;
}

[class^="gpc-masonry__image"] figure {
  overflow: hidden;
  height: 100%;
}

[class^="gpc-masonry__image"] img {
  width: auto;
  min-width: 100% !important;
  height: 100% !important;
  object-fit: cover;
  object-position: center center;
  mix-blend-mode: multiply;
}

.gpc-masonry__image {
  grid-area: image;
}

.gpc-masonry__image-2 {
  grid-area: image-2;
}

.gpc-masonry__image-3 {
  grid-area: image-3;
}

.gpc-masonry__image-4 {
  grid-area: image-4;
}

.gpc-masonry__content .content-1 {
  grid-area: content-1;
}

.gpc-masonry__content .content-2 {
  grid-area: content-2;
}

.gpc-masonry__content .content-3 {
  grid-area: content-3;
}

.gpc-masonry__content .flip-box {
  background-color: transparent;
  width: 100%;
  height: 100%;
  perspective: 1000px;
}

.gpc-masonry__inner,
.gpc-masonry__content .flip-box-front,
.gpc-masonry__content .flip-box-back {
  padding: 40px var(--content-padding);
}

.gpc-masonry__content .flip-box-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.8s;
  transform-style: preserve-3d;
  display: flex;
  justify-content: center;
  align-items: center;
}

.gpc-masonry__content:hover .flip-box .flip-box-inner {
  transform: rotateY(180deg);
}

.gpc-masonry__content .flip-box-front,
.gpc-masonry__content .flip-box-back {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.gpc-masonry__content .flip-box-front {
  background: transparent;
  color: var(--color-dark);
}

.gpc-masonry__content .flip-box .gpc-icon {
  font-size: 50px;
}

.gpc-masonry__content .flip-box-front .gpc-icon {
  color: var(--color-primary);
}

.gpc-masonry__content .flip-box-back .gpc-icon {
  color: var(--color-white);
}

.gpc-masonry__content .flip-box-back {
  background: var(--color-primary);
  color: var(--color-white);
  transform: rotateY(180deg);
}

/*
.gpc-masonry__content {
  background-color: var(--color-primary);
  color: var(--color-white);
  text-align: center;
}

.gpc-masonry__content:hover {
  background-color: var(--color-secondary);
  color: var(--color-white);
}

.gpc-masonry__inner {
  padding: var(--content-padding);
}

.gpc-masonry__content .gpc-icon {
  font-size: 50px;
}
*/

.gpc-masonry__title {
  position: relative;
}

.gpc-masonry__divider {
  position: relative;
  padding: 20px 0;
}

.gpc-masonry__divider::before {
  position: absolute;
  content: "";
  width: 50px;
  height: 3px;
  left: 50%;
  transform: translateX(-50%);
}

.gpc-masonry__content .flip-box-front .gpc-masonry__divider:before {
  background: var(--color-primary);
}

.gpc-masonry__content .flip-box-back .gpc-masonry__divider:before {
  background: var(--color-white);
}

.gpc-masonry__content .flip-box-back .gpc-masonry__title {
  font-size: 15px;
}