/**
 * @file
 * team section styles
 */

:root {
  /* Center */
  --img-center-width: 40%;

  /* Top Left */
  --img-top-left-width: 18%;
  --img-top-left-top: 15%;
  --img-top-left-left: 0;

  /* Bottom Left */
  --img-bottom-left-width: 15%;
  --img-bottom-left-bottom: 15%;
  --img-bottom-left-left: 10%;

  /* Top Right */
  --img-top-right-width: 14%;
  --img-top-right-top: 10%;
  --img-top-right-right: 10%;

  /* Bottom Right */
  --img-bottom-right-width: 20%;
  --img-bottom-right-bottom: 10%;
  --img-bottom-right-right: 8%;
  --reveal-section-height: 100vh;
}

/* .team-section .section-title {
  margin-bottom: var(--sp4);
}

*/
/* The container that will be pinned */
.reveal-section {
  width: 100%;
  height: var(--reveal-section-height);
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

.gallery {
  position: relative;
  width: 100%;
  height: 100%;
  max-width: 1400px;
  margin: 0 auto;
}

.gallery-item {
  position: absolute;
  overflow: hidden;
}

.gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* --- Positioning --- */

.img-center {
  width: var(--img-center-width);
  height: auto;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 9;
}

.img-top-left {
  width: var(--img-top-left-width);
  top: var(--img-top-left-top);
  left: var(--img-top-left-left);
  z-index: 5;
}

.img-bottom-left {
  width: var(--img-bottom-left-width);
  bottom: var(--img-bottom-left-bottom);
  left: var(--img-bottom-left-left);
  z-index: 6;
}

.img-top-right {
  width: var(--img-top-right-width);
  top: var(--img-top-right-top);
  right: var(--img-top-right-right);
  z-index: 4;
}

.img-bottom-right {
  width: var(--img-bottom-right-width);
  bottom: var(--img-bottom-right-bottom);
  right: var(--img-bottom-right-right);
  z-index: 7;
}

.reveal-section img {
  will-change: transform, filter, opacity;
  backface-visibility: hidden;
}