/* GTI Sec Image Boxes — fork of POWER sec-image-boxes.
   Base layout, masonry, and filtering come from parent theme CSS/JS (pwr-sec-image, pwr-masonry, Isotope).
   Add Group GTI overrides below. */

/* Horizontal inset — .dnd-section already applies --sp-p-hor-* padding; cancel POWER's
   duplicate .page-center margins so this section aligns with full-width GTI modules. */
@media (max-width: 1440px) {
  .gti-sec-image-boxes .page-center {
    margin-left: 0;
    margin-right: 0;
  }
}

/* Image / video container */
.gti-sec-image-boxes {
  --gti-image-box-radius: 16px;
}

.gti-sec-image-boxes .pwr-image-box__img {
  border-radius: var(--gti-image-box-radius);
  overflow: hidden;
}

/* Dark overlay scheme — push image away from bottom-left text panel corner */
.gti-sec-image-boxes .pwr-image-box.gti-image-box--overlay-scheme-dark .pwr-image-box__img .pwr-background-img,
.gti-sec-image-boxes .pwr-image-box.gti-image-box--overlay-scheme-dark .pwr-image-box__img img {
  border-bottom-left-radius: 32px;
}

.gti-sec-image-boxes .pwr-image-box.gti-image-box--overlay-scheme-dark:hover .pwr-image-box__img .pwr-background-img,
.gti-sec-image-boxes .pwr-image-box.gti-image-box--overlay-scheme-dark:hover .pwr-image-box__img img,
.gti-sec-image-boxes .pwr-image-box.gti-image-box--overlay-scheme-dark.pwr-image-box--is-link:hover .pwr-image-box__img .pwr-background-img,
.gti-sec-image-boxes .pwr-image-box.gti-image-box--overlay-scheme-dark.pwr-image-box--is-link:hover .pwr-image-box__img img,
.gti-sec-image-boxes .pwr-image-box.gti-image-box--overlay-scheme-dark.pwr-touch-btn-container.pwr-3D-box--active .pwr-image-box__img .pwr-background-img,
.gti-sec-image-boxes .pwr-image-box.gti-image-box--overlay-scheme-dark.pwr-touch-btn-container.pwr-3D-box--active .pwr-image-box__img img {
  border-bottom-left-radius: var(--gti-image-box-radius);
}

/* Overlay scheme tokens — resolved per box in module.html (inherit + overrides) */
.gti-sec-image-boxes .pwr-image-box.gti-image-box--overlay-scheme-light {
  --gti-image-box-overlay-bg: var(--clr-background-dk, #000);
  --gti-image-box-overlay-text: var(--clr-text-dk);
  --gti-hover-overlay-color: var(--mod-imgb-clr-hover-box-background, var(--gti-image-box-overlay-bg));
}

.gti-sec-image-boxes .pwr-image-box.gti-image-box--overlay-scheme-dark {
  --gti-image-box-overlay-bg: var(--clr-background-lt, #fff);
  --gti-image-box-overlay-text: var(--clr-text-lt);
  --gti-hover-overlay-color: var(--mod-imgb-clr-hover-box-background, var(--gti-image-box-overlay-bg));
}

/* Hover overlay — darker at top, fades toward bottom */
.gti-sec-image-boxes .pwr-image-box__overlay {
  background-color: transparent !important;
  background-image: linear-gradient(
    to bottom,
    var(--gti-hover-overlay-color) 2.03%,
    color-mix(in srgb, var(--gti-hover-overlay-color) 35%, transparent) 50%,
    color-mix(in srgb, var(--gti-hover-overlay-color) 20%, transparent) 98.16%,
    transparent 100%
  );
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
}

@supports (color: rgb(from red r g b)) {
  .gti-sec-image-boxes .pwr-image-box__overlay {
    background-image: linear-gradient(
      to bottom,
      var(--gti-hover-overlay-color) 2.03%,
      rgb(from var(--gti-hover-overlay-color) r g b / 0.35) 50%,
      rgb(from var(--gti-hover-overlay-color) r g b / 0.2) 98.16%,
      transparent 100%
    );
  }
}

/* Render gradient at full strength — POWER defaults to ~0.85 opacity on hover */
.gti-sec-image-boxes .pwr-image-box:hover .pwr-image-box__overlay:not(.pwr-image-box__overlay--front),
.gti-sec-image-boxes .pwr-touch-btn-container.pwr-3D-box--active .pwr-image-box__overlay:not(.pwr-image-box__overlay--front),
.gti-sec-image-boxes .pwr-image-box__overlay--front {
  opacity: 1 !important;
}

/* Hover overlay content — top-left, padded (back panel only; not default front).
   POWER flips front→back on hover; we crossfade instead so back stays top-left without a flip jump. */
.gti-sec-image-boxes .pwr-image-box__img .pwr-3D-box__sensor {
  transform: none !important;
}

.gti-sec-image-boxes .pwr-image-box__front,
.gti-sec-image-boxes .pwr-image-box__back {
  backface-visibility: visible;
  transform: none !important;
}

.gti-sec-image-boxes .pwr-image-box__back {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: flex-start !important;
  justify-content: flex-start !important;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  padding: 24px !important;
  color: var(--clr-text-dk);
  text-align: left;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.gti-sec-image-boxes .pwr-image-box:hover .pwr-image-box__back,
.gti-sec-image-boxes .pwr-touch-btn-container.pwr-3D-box--active .pwr-image-box__back,
.gti-sec-image-boxes .pwr-image-box--is-link:hover .pwr-image-box__back {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  padding: 24px !important;
}

.gti-sec-image-boxes .pwr-image-box:hover .pwr-image-box__front:not(.pwr-image-box__front--hide),
.gti-sec-image-boxes .pwr-touch-btn-container.pwr-3D-box--active .pwr-image-box__front:not(.pwr-image-box__front--hide),
.gti-sec-image-boxes .pwr-image-box--is-link:hover .pwr-image-box__front:not(.pwr-image-box__front--hide) {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.gti-sec-image-boxes .pwr-image-box__front:not(.pwr-image-box__front--hide) {
  box-sizing: border-box;
  padding: 16px;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.gti-sec-image-boxes .pwr-image-box__back .pwr-image-box__more-link {
  align-self: flex-start;
  text-align: left;
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: 120%;
  color: var(--clr-text-dk);
}

/* Show only link on hover — center link in overlay, no title/desc */
.gti-sec-image-boxes--hover-link-only .pwr-image-box__back {
  align-items: center !important;
  justify-content: center !important;
  text-align: center;
}

.gti-sec-image-boxes--hover-link-only .pwr-image-box__back .pwr-image-box__more-link {
  align-self: center;
  text-align: center;
  height: auto;
  opacity: 1;
  overflow: visible;
  padding: 0;
  font-size: 16px;
}

.gti-sec-image-boxes--hover-link-only .pwr-image-box:hover .pwr-image-box__back .pwr-image-box__more-link,
.gti-sec-image-boxes--hover-link-only .pwr-touch-btn-container.pwr-3D-box--active .pwr-image-box__back .pwr-image-box__more-link,
.gti-sec-image-boxes--hover-link-only .pwr-image-box--is-link:hover .pwr-image-box__back .pwr-image-box__more-link {
  height: auto;
  opacity: 1;
  padding-top: 0;
}

/* No arrow slide on hover */
.gti-sec-image-boxes .pwr-image-box__more-link .pwr-image-box__icon {
  transition: none !important;
  transform: none !important;
  margin-left: 0 !important;
  margin-inline-start: 0 !important;
}

.gti-sec-image-boxes .pwr-image-box__more-link,
.gti-sec-image-boxes .pwr-image-box__more-link .pwr-image-box__icon::before {
  transition: none !important;
  transform: none !important;
}

.gti-sec-image-boxes .pwr-image-box:hover .pwr-image-box__more-link,
.gti-sec-image-boxes .pwr-image-box:hover .pwr-image-box__more-link .pwr-image-box__icon,
.gti-sec-image-boxes .pwr-image-box:hover .pwr-image-box__more-link .pwr-image-box__icon::before,
.gti-sec-image-boxes .pwr-image-box__more-link:hover,
.gti-sec-image-boxes .pwr-image-box__more-link:hover .pwr-image-box__icon,
.gti-sec-image-boxes .pwr-image-box__more-link:hover .pwr-image-box__icon::before,
.gti-sec-image-boxes .pwr-touch-btn-container.pwr-3D-box--active .pwr-image-box__more-link,
.gti-sec-image-boxes .pwr-touch-btn-container.pwr-3D-box--active .pwr-image-box__more-link .pwr-image-box__icon,
.gti-sec-image-boxes .pwr-touch-btn-container.pwr-3D-box--active .pwr-image-box__more-link .pwr-image-box__icon::before {
  transform: none !important;
  margin-left: 0 !important;
  margin-inline-start: 0 !important;
}

.gti-sec-image-boxes .pwr-image-box__back .pwr-image-box__intro,
.gti-sec-image-boxes .pwr-image-box__front:not(.pwr-image-box__front--hide) .pwr-image-box__intro,
.gti-sec-image-boxes .pwr-image-box__back .gti-image-box__heading .pwr-image-box__intro,
.gti-sec-image-boxes .pwr-image-box__front:not(.pwr-image-box__front--hide) .gti-image-box__heading .pwr-image-box__intro {
  font-family: "Zalando Sans SemiExpanded", sans-serif;
  font-size: 18px;
  font-style: normal;
  font-weight: 500;
  line-height: 120%;
  letter-spacing: 0.36px;
  text-transform: uppercase;
  margin: 0;
  display: block;
}

.gti-sec-image-boxes .pwr-image-box__back .pwr-image-box__intro,
.gti-sec-image-boxes .pwr-image-box__back .gti-image-box__heading .pwr-image-box__intro {
  color: var(--clr-text-dk);
}

.gti-sec-image-boxes .pwr-image-box__back .pwr-image-box__title,
.gti-sec-image-boxes .pwr-image-box__front:not(.pwr-image-box__front--hide) .pwr-image-box__title,
.gti-sec-image-boxes .pwr-image-box__back .gti-image-box__heading .pwr-image-box__title,
.gti-sec-image-boxes .pwr-image-box__front:not(.pwr-image-box__front--hide) .gti-image-box__heading .pwr-image-box__title {
  font-family: "Zalando Sans SemiExpanded", sans-serif;
  font-size: 18px;
  font-style: normal;
  font-weight: 500;
  line-height: 120%;
  margin: 0;
  display: block;
}

.gti-sec-image-boxes .pwr-image-box__back .pwr-image-box__title,
.gti-sec-image-boxes .pwr-image-box__back .gti-image-box__heading .pwr-image-box__title {
  color: var(--clr-text-dk);
  font-size: 20px;
}

.gti-sec-image-boxes .pwr-image-box__back .pwr-image-box__desc,
.gti-sec-image-boxes .pwr-image-box__front:not(.pwr-image-box__front--hide) .pwr-image-box__desc {
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 120%;
  margin: 0;
}

.gti-sec-image-boxes .pwr-image-box__back .pwr-image-box__desc {
  color: var(--clr-text-dk);
}

.gti-sec-image-boxes .pwr-image-box__back .pwr-image-box__desc p,
.gti-sec-image-boxes .pwr-image-box__back .pwr-image-box__desc ul,
.gti-sec-image-boxes .pwr-image-box__back .pwr-image-box__desc ol,
.gti-sec-image-boxes .pwr-image-box__back .pwr-image-box__desc li,
.gti-sec-image-boxes .pwr-image-box__front:not(.pwr-image-box__front--hide) .pwr-image-box__desc p,
.gti-sec-image-boxes .pwr-image-box__front:not(.pwr-image-box__front--hide) .pwr-image-box__desc ul,
.gti-sec-image-boxes .pwr-image-box__front:not(.pwr-image-box__front--hide) .pwr-image-box__desc ol,
.gti-sec-image-boxes .pwr-image-box__front:not(.pwr-image-box__front--hide) .pwr-image-box__desc li {
  margin: 0;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
}

.gti-sec-image-boxes .pwr-image-box__back .pwr-image-box__desc p,
.gti-sec-image-boxes .pwr-image-box__back .pwr-image-box__desc ul,
.gti-sec-image-boxes .pwr-image-box__back .pwr-image-box__desc ol,
.gti-sec-image-boxes .pwr-image-box__back .pwr-image-box__desc li {
  color: inherit;
}

.gti-sec-image-boxes .pwr-image-box__back .pwr-image-box__desc p + p,
.gti-sec-image-boxes .pwr-image-box__front:not(.pwr-image-box__front--hide) .pwr-image-box__desc p + p {
  margin-top: 0.75em;
}

/* Spacing — stacked intro/title only (inline mode uses flex gap on .gti-image-box__heading) */
.gti-sec-image-boxes:not(.gti-sec-image-boxes--inline-numbers) .pwr-image-box__back .pwr-image-box__intro + .pwr-image-box__title,
.gti-sec-image-boxes:not(.gti-sec-image-boxes--inline-numbers) .pwr-image-box__front:not(.pwr-image-box__front--hide) .pwr-image-box__intro + .pwr-image-box__title {
  margin-top: 12px;
}

.gti-sec-image-boxes .pwr-image-box__back .pwr-image-box__intro + .pwr-image-box__desc,
.gti-sec-image-boxes .pwr-image-box__front:not(.pwr-image-box__front--hide) .pwr-image-box__intro + .pwr-image-box__desc {
  margin-top: 0;
}

.gti-sec-image-boxes .pwr-image-box__back .pwr-image-box__title + .pwr-image-box__desc,
.gti-sec-image-boxes .pwr-image-box__back .gti-image-box__heading + .pwr-image-box__desc,
.gti-sec-image-boxes .pwr-image-box__front:not(.pwr-image-box__front--hide) .pwr-image-box__title + .pwr-image-box__desc,
.gti-sec-image-boxes .pwr-image-box__front:not(.pwr-image-box__front--hide) .gti-image-box__heading + .pwr-image-box__desc {
  margin-top: 0;
}

.gti-sec-image-boxes .pwr-image-box__back .pwr-image-box__intro + .pwr-image-box__more-link,
.gti-sec-image-boxes .pwr-image-box__back .pwr-image-box__title + .pwr-image-box__more-link,
.gti-sec-image-boxes .pwr-image-box__back .gti-image-box__heading + .pwr-image-box__more-link {
  margin-top: 48px;
}

.gti-sec-image-boxes .pwr-image-box__back .pwr-image-box__desc + .pwr-image-box__more-link {
  margin-top: 24px;
}

/* YouTube background — fills the same area as .pwr-background-img */
.gti-image-box__video {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: inherit;
  z-index: 0;
}

.gti-image-box__video-iframe {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 177.77777778vh;
  height: 100%;
  min-width: 100%;
  min-height: 56.25vw;
  transform: translate(-50%, -50%);
  border: 0;
  pointer-events: none;
}

.gti-image-box__video--poster .gti-image-box__video-poster {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  border-radius: inherit;
  overflow: hidden;
}

.gti-image-box__video--poster .gti-image-box__video-poster-media,
.gti-image-box__video--poster .gti-image-box__video-poster-media .pwr-background-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: inherit;
}

.gti-image-box__video--poster .gti-image-box__video-poster-media .pwr-background-img {
  background-size: cover;
  background-position: center;
}

.gti-image-box__video-play {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 2;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: rgb(0 0 0 / 0.55);
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.gti-image-box__video-play::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 54%;
  transform: translate(-50%, -50%);
  border-style: solid;
  border-width: 10px 0 10px 16px;
  border-color: transparent transparent transparent #fff;
}

.gti-image-box__video--playing .gti-image-box__video-poster {
  display: none;
}

.gti-image-box--has-video .gti-image-box__video-iframe {
  pointer-events: auto;
}

.gti-image-box--has-video .pwr-image-box__front,
.gti-image-box--has-video .pwr-image-box__back,
.gti-image-box--has-video .pwr-image-box__overlay {
  pointer-events: none;
}

.gti-image-box--has-video .gti-image-box__front--text-overlay,
.gti-image-box--has-video .gti-image-box__front--text-overlay::before {
  pointer-events: none;
}

.pwr-image-box__img .gti-image-box__video,
.pwr-image-box__img .gti-image-box__video-iframe {
  border-radius: inherit;
}

/* Text-only bottom overlay (Style → Use Overlay on Text Front?) */
.gti-sec-image-boxes--text-overlay-front .pwr-image-box__img {
  position: relative;
  overflow: hidden;
}

.gti-sec-image-boxes--text-overlay-front .gti-image-box__front--text-overlay:not(.pwr-image-box__front--hide) {
  position: absolute;
  inset: auto 0 0 0;
  top: auto;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-start;
  width: 100%;
  margin: 0;
  padding: 16px;
  box-sizing: border-box;
  text-align: left;
  pointer-events: none;
  color: var(--gti-image-box-overlay-text);
  isolation: isolate;
  transform: translateY(0) !important;
  transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease;
}

.gti-sec-image-boxes--text-overlay-front .pwr-image-box:hover .gti-image-box__front--text-overlay:not(.pwr-image-box__front--hide),
.gti-sec-image-boxes--text-overlay-front .pwr-touch-btn-container.pwr-3D-box--active .gti-image-box__front--text-overlay:not(.pwr-image-box__front--hide),
.gti-sec-image-boxes--text-overlay-front .pwr-image-box--is-link:hover .gti-image-box__front--text-overlay:not(.pwr-image-box__front--hide) {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(100%) !important;
}

/* Text front scrim — linear-gradient(90deg, color 31.66%, rgba(color, 0.2) 100%) */
.gti-sec-image-boxes--text-overlay-front .gti-image-box__front--text-overlay:not(.pwr-image-box__front--hide)::before {
  content: "";
  position: absolute;
  top: 0;
  left: -2px;
  right: -2px;
  bottom: -2px;
  z-index: -1;
  border-radius: 0 0 calc(var(--gti-image-box-radius) + 2px) calc(var(--gti-image-box-radius) + 2px);
  background-color: transparent;
  background-image: linear-gradient(
    90deg,
    var(--gti-image-box-overlay-bg) 31.66%,
    color-mix(in srgb, var(--gti-image-box-overlay-bg) 20%, transparent) 100%
  );
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
  pointer-events: none;
}

@supports (color: rgb(from red r g b)) {
  .gti-sec-image-boxes--text-overlay-front .gti-image-box__front--text-overlay:not(.pwr-image-box__front--hide)::before {
    background-image: linear-gradient(
      90deg,
      var(--gti-image-box-overlay-bg) 31.66%,
      rgb(from var(--gti-image-box-overlay-bg) r g b / 0.2) 100%
    );
  }
}

.gti-sec-image-boxes--text-overlay-front .gti-image-box__front--text-overlay .pwr-image-box__title,
.gti-sec-image-boxes--text-overlay-front .gti-image-box__front--text-overlay .pwr-image-box__desc {
  position: relative;
  z-index: 1;
  color: inherit;
}

/* Inline intro to title + title on one line (Style → Inline Intro to Title?) */
.gti-sec-image-boxes--inline-numbers .gti-image-box__heading {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 12px;
}

.gti-sec-image-boxes--inline-numbers .gti-image-box__heading .pwr-image-box__intro,
.gti-sec-image-boxes--inline-numbers .gti-image-box__heading .pwr-image-box__title {
  margin: 0;
}

.gti-sec-image-boxes--text-overlay-front.gti-sec-image-boxes--inline-numbers .gti-image-box__heading {
  position: relative;
  z-index: 1;
  color: inherit;
}

/* Hide Text? — no copy on the image front */
.gti-sec-image-boxes--hide-text .pwr-image-box__front {
  display: none !important;
}

/* Hide Hover? — no flip overlay, touch prompt, image hover link, or dark overlay tint */
.gti-sec-image-boxes--hide-hover .pwr-touch-btn {
  display: none !important;
}

.gti-sec-image-boxes--hide-hover .pwr-image-box__back {
  display: none !important;
}

.gti-sec-image-boxes--hide-hover .pwr-touch-btn-container .pwr-3D-box__sensor:hover,
.gti-sec-image-boxes--hide-hover .pwr-touch-btn-container.pwr-3D-box--active .pwr-3D-box__sensor,
.gti-sec-image-boxes--hide-hover .pwr-image-box--is-link .pwr-3D-box__sensor:hover {
  transform: none !important;
}

.gti-sec-image-boxes--hide-hover .pwr-3D-box__info-box--centered {
  display: none !important;
}

.gti-sec-image-boxes--hide-hover .pwr-image-box:hover .pwr-image-box__overlay:not(.pwr-image-box__overlay--front),
.gti-sec-image-boxes--hide-hover .pwr-touch-btn-container.pwr-3D-box--active .pwr-image-box__overlay:not(.pwr-image-box__overlay--front) {
  opacity: 0 !important;
  background-color: transparent !important;
  background-image: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

.gti-sec-image-boxes--hide-hover .pwr-image-box:hover .pwr-image-box__overlay--front,
.gti-sec-image-boxes--hide-hover .pwr-touch-btn-container.pwr-3D-box--active .pwr-image-box__overlay--front {
  opacity: 0.45 !important;
}

/* Per-box Hide Hover (video items auto-apply) */
.gti-image-box--hide-hover .pwr-touch-btn {
  display: none !important;
}

.gti-image-box--hide-hover .pwr-image-box__back {
  display: none !important;
}

.gti-image-box--hide-hover.pwr-touch-btn-container .pwr-3D-box__sensor:hover,
.gti-image-box--hide-hover.pwr-touch-btn-container.pwr-3D-box--active .pwr-3D-box__sensor,
.gti-image-box--hide-hover.pwr-image-box--is-link .pwr-3D-box__sensor:hover {
  transform: none !important;
}

.gti-image-box--hide-hover .pwr-3D-box__info-box--centered {
  display: none !important;
}

.gti-image-box--hide-hover:hover .pwr-image-box__overlay:not(.pwr-image-box__overlay--front),
.gti-image-box--hide-hover.pwr-3D-box--active .pwr-image-box__overlay:not(.pwr-image-box__overlay--front) {
  opacity: 0 !important;
  background-color: transparent !important;
  background-image: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

.gti-image-box--hide-hover:hover .pwr-image-box__overlay--front,
.gti-image-box--hide-hover.pwr-3D-box--active .pwr-image-box__overlay--front {
  opacity: 0.45 !important;
}

/* Category filter tabs — shared rules in css/components/index.css */

/* 6 column masonry only — extra sizes 3x1 through 4x4 (class: {height}-by-{width}) */
.gti-sec-image-boxes .pwr-image-box.pwr-image-box--6cols.pwr-image-box--three-by-one,
.gti-sec-image-boxes .pwr-image-box.pwr-image-box--6cols.pwr-image-box--four-by-one {
  width: calc(16.667% - 20px);
}

.gti-sec-image-boxes .pwr-image-box.pwr-image-box--6cols.pwr-image-box--three-by-two,
.gti-sec-image-boxes .pwr-image-box.pwr-image-box--6cols.pwr-image-box--four-by-two {
  width: calc(33.333% - 20px);
}

.gti-sec-image-boxes .pwr-image-box.pwr-image-box--6cols.pwr-image-box--one-by-three,
.gti-sec-image-boxes .pwr-image-box.pwr-image-box--6cols.pwr-image-box--two-by-three,
.gti-sec-image-boxes .pwr-image-box.pwr-image-box--6cols.pwr-image-box--three-by-three {
  width: calc(50% - 20px);
}

.gti-sec-image-boxes .pwr-image-box.pwr-image-box--6cols.pwr-image-box--one-by-four,
.gti-sec-image-boxes .pwr-image-box.pwr-image-box--6cols.pwr-image-box--two-by-four,
.gti-sec-image-boxes .pwr-image-box.pwr-image-box--6cols.pwr-image-box--three-by-four,
.gti-sec-image-boxes .pwr-image-box.pwr-image-box--6cols.pwr-image-box--four-by-four {
  width: calc(66.667% - 20px);
}

/* Row heights — parent only covers one-by-{one,two} and two-by-{one,two} */
.gti-sec-image-boxes .pwr-image-box.pwr-image-box--6cols.pwr-image-box--two-by-three .pwr-image-box__img,
.gti-sec-image-boxes .pwr-image-box.pwr-image-box--6cols.pwr-image-box--two-by-four .pwr-image-box__img {
  height: 780px;
}

.gti-sec-image-boxes .pwr-image-box.pwr-image-box--6cols.pwr-image-box--three-by-one .pwr-image-box__img,
.gti-sec-image-boxes .pwr-image-box.pwr-image-box--6cols.pwr-image-box--three-by-two .pwr-image-box__img,
.gti-sec-image-boxes .pwr-image-box.pwr-image-box--6cols.pwr-image-box--three-by-three .pwr-image-box__img,
.gti-sec-image-boxes .pwr-image-box.pwr-image-box--6cols.pwr-image-box--three-by-four .pwr-image-box__img {
  height: 1180px;
}

.gti-sec-image-boxes .pwr-image-box.pwr-image-box--6cols.pwr-image-box--four-by-one .pwr-image-box__img,
.gti-sec-image-boxes .pwr-image-box.pwr-image-box--6cols.pwr-image-box--four-by-two .pwr-image-box__img,
.gti-sec-image-boxes .pwr-image-box.pwr-image-box--6cols.pwr-image-box--four-by-three .pwr-image-box__img,
.gti-sec-image-boxes .pwr-image-box.pwr-image-box--6cols.pwr-image-box--four-by-four .pwr-image-box__img {
  height: 1580px;
}

@media (max-width: 991px) {
  .gti-sec-image-boxes .pwr-image-box.pwr-image-box--6cols.pwr-image-box--one-by-three,
  .gti-sec-image-boxes .pwr-image-box.pwr-image-box--6cols.pwr-image-box--two-by-three,
  .gti-sec-image-boxes .pwr-image-box.pwr-image-box--6cols.pwr-image-box--three-by-three,
  .gti-sec-image-boxes .pwr-image-box.pwr-image-box--6cols.pwr-image-box--one-by-four,
  .gti-sec-image-boxes .pwr-image-box.pwr-image-box--6cols.pwr-image-box--two-by-four,
  .gti-sec-image-boxes .pwr-image-box.pwr-image-box--6cols.pwr-image-box--three-by-four,
  .gti-sec-image-boxes .pwr-image-box.pwr-image-box--6cols.pwr-image-box--four-by-four {
    width: calc(100% - 20px) !important;
  }

  .gti-sec-image-boxes .pwr-image-box.pwr-image-box--6cols.pwr-image-box--three-by-one,
  .gti-sec-image-boxes .pwr-image-box.pwr-image-box--6cols.pwr-image-box--three-by-two,
  .gti-sec-image-boxes .pwr-image-box.pwr-image-box--6cols.pwr-image-box--four-by-one,
  .gti-sec-image-boxes .pwr-image-box.pwr-image-box--6cols.pwr-image-box--four-by-two {
    width: calc(50% - 20px) !important;
  }

  .gti-sec-image-boxes .pwr-image-box.pwr-image-box--6cols.pwr-image-box--four-by-three {
    width: calc(100% - 20px) !important;
  }
}

@media (max-width: 767px) {
  .gti-sec-image-boxes .pwr-image-box.pwr-image-box--6cols.pwr-image-box--one-by-three,
  .gti-sec-image-boxes .pwr-image-box.pwr-image-box--6cols.pwr-image-box--two-by-three,
  .gti-sec-image-boxes .pwr-image-box.pwr-image-box--6cols.pwr-image-box--three-by-one,
  .gti-sec-image-boxes .pwr-image-box.pwr-image-box--6cols.pwr-image-box--three-by-two,
  .gti-sec-image-boxes .pwr-image-box.pwr-image-box--6cols.pwr-image-box--three-by-three,
  .gti-sec-image-boxes .pwr-image-box.pwr-image-box--6cols.pwr-image-box--one-by-four,
  .gti-sec-image-boxes .pwr-image-box.pwr-image-box--6cols.pwr-image-box--two-by-four,
  .gti-sec-image-boxes .pwr-image-box.pwr-image-box--6cols.pwr-image-box--three-by-four,
  .gti-sec-image-boxes .pwr-image-box.pwr-image-box--6cols.pwr-image-box--four-by-one,
  .gti-sec-image-boxes .pwr-image-box.pwr-image-box--6cols.pwr-image-box--four-by-two,
  .gti-sec-image-boxes .pwr-image-box.pwr-image-box--6cols.pwr-image-box--four-by-three,
  .gti-sec-image-boxes .pwr-image-box.pwr-image-box--6cols.pwr-image-box--four-by-four {
    width: 100% !important;
  }

  .gti-sec-image-boxes .pwr-image-box.pwr-image-box--6cols.pwr-image-box--three-by-one .pwr-image-box__img,
  .gti-sec-image-boxes .pwr-image-box.pwr-image-box--6cols.pwr-image-box--three-by-two .pwr-image-box__img,
  .gti-sec-image-boxes .pwr-image-box.pwr-image-box--6cols.pwr-image-box--three-by-three .pwr-image-box__img,
  .gti-sec-image-boxes .pwr-image-box.pwr-image-box--6cols.pwr-image-box--two-by-three .pwr-image-box__img,
  .gti-sec-image-boxes .pwr-image-box.pwr-image-box--6cols.pwr-image-box--four-by-one .pwr-image-box__img,
  .gti-sec-image-boxes .pwr-image-box.pwr-image-box--6cols.pwr-image-box--four-by-two .pwr-image-box__img,
  .gti-sec-image-boxes .pwr-image-box.pwr-image-box--6cols.pwr-image-box--four-by-three .pwr-image-box__img,
  .gti-sec-image-boxes .pwr-image-box.pwr-image-box--6cols.pwr-image-box--four-by-four .pwr-image-box__img,
  .gti-sec-image-boxes .pwr-image-box.pwr-image-box--6cols.pwr-image-box--two-by-four .pwr-image-box__img,
  .gti-sec-image-boxes .pwr-image-box.pwr-image-box--6cols.pwr-image-box--three-by-four .pwr-image-box__img {
    height: 380px;
  }
}
