.pg-kitec-grid {
  --color-text: #000;
  --color-text-alt: #000;
  --color-bg: #e4e5ff;
  --color-link: #000;
  --color-link-hover: #000;
  --color-link-alt: #000;
  --color-type: #000;
  --type-line-opacity: 0.05;
  position: relative;
  overflow: hidden;
  background-color: var(--color-bg);
}
.pg-kitec-grid .unbutton {
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  font: inherit;
}
.pg-kitec-grid .unbutton:focus {
  outline: none;
}
.pg-kitec-grid .item {
  --base: 3vh;
  --interval: 7vh;
  margin: 1rem 0;
  cursor: pointer;
  width: 100%;
  position: relative;
  flex: none;
  will-change: transform, opacity;
  border-radius: 10px;
}
.pg-kitec-grid .item__img {
  width: 100%;
  border-radius: 10px;
  will-change: transform;
}
.pg-kitec-grid .item__caption-title {
  font-size: 30px;
  font-weight: 700;
  margin: 0;
}
.pg-kitec-grid .item__caption-description {
  display: none;
}
.pg-kitec-grid .item__caption {
  padding-top: 20px;
}
.pg-kitec-grid .type {
  position: absolute;
  height: 100vh;
  text-transform: uppercase;
  width: 100vmax;
  display: grid;
  justify-content: center;
  align-content: center;
  text-align: center;
  top: 0;
  will-change: transform;
  overflow: hidden;
}
.pg-kitec-grid .type__line {
  white-space: nowrap;
  font-size: 20vh;
  font-size: clamp(7rem, 18.75vh, 15rem);
  line-height: 0.75;
  font-weight: bold;
  font-family: quiche-sans, sans-serif;
  color: rgba(0, 0, 0, 0.039);
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  will-change: transform, opacity;
}
.pg-kitec-grid .article-wrap {
  position: relative;
  top: 0;
  width: 100%;
  justify-self: center;
  align-self: end;
  padding: 1rem;
  pointer-events: none;
}
.pg-kitec-grid .article {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  display: grid;
  grid-template-columns: 1rem 1fr;
  width: 100%;
  align-items: start;
  grid-template-areas: 'img img' 'number title' 'intro intro' 'desc desc';
}
.pg-kitec-grid .article--current {
  opacity: 1;
  pointer-events: auto;
  position: relative;
}
.pg-kitec-grid .article__img-wrap {
  width: 100%;
  overflow: hidden;
  grid-area: img;
  transform-origin: 50% 100%;
  margin-bottom: 1rem;
  border-radius: 17px 17px 0 0;
}
.pg-kitec-grid .article__img {
  width: 100%;
  height: 100% !important;
  object-fit: cover;
  background-size: cover;
  background-position: 50% 35%;
}
.pg-kitec-grid .article__number {
  grid-area: number;
  font-weight: bold;
}
.pg-kitec-grid .article__title {
  grid-area: title;
  line-height: 0.85;
  font-size: 8vw;
  text-transform: uppercase;
  font-weight: bold;
  font-family: quiche-sans, sans-serif;
  color: var(--color-type);
  position: relative;
  margin: 1rem 0 0.5rem;
  pointer: default;
}
.pg-kitec-grid .article__intro {
  grid-area: intro;
  font-weight: bold;
  padding-left: 2rem;
}
.pg-kitec-grid .article__description {
  grid-area: desc;
  overflow: hidden;
  padding-left: 2rem;
}
.pg-kitec-grid .back {
  background: none;
  border: 0;
  padding: 0;
  margin: 0 0 1rem 0;
  top: 0;
  right: 0;
  opacity: 0;
  pointer-events: none;
  stroke: #000;
  z-index: 1000;
  cursor: pointer;
  width: 60px;
}
.pg-kitec-grid .back svg {
  stroke-linecap: round;
}
.pg-kitec-grid .back:hover,
.pg-kitec-grid .back:focus {
  outline: none;
  stroke: #823725;
}
.pg-kitec-grid.pg-open-kitec-modal .item-wrap {
  position: absolute;
}
@media screen and (min-width: 1024px) {
  .pg-kitec-grid.pg-open-kitec-modal .item-wrap {
    position: absolute;
  }
  .pg-kitec-grid .item-wrap {
    min-height: var(--pg-slider-height, 80vh);
    display: flex;
    overflow: hidden;
    width: 100vw;
    position: relative;
    justify-content: flex-start;
    align-items: center;
  }
  .pg-kitec-grid .item {
    width: 21vw;
    margin: auto 2vw var(--base);
    padding: 20px;
  }
  .pg-kitec-grid .item:nth-child(4) {
    margin-top: 0px;
  }
  .pg-kitec-grid .item:nth-child(3) {
    margin-top: calc(var(--base) + var(--interval));
  }
  .pg-kitec-grid .item:nth-child(2) {
    margin-top: calc(var(--base) + var(--interval) * 2);
  }
  .pg-kitec-grid .item:nth-child(1) {
    margin-top: calc(var(--base) + var(--interval) * 3);
  }
  .pg-kitec-grid .item__caption-description {
    display: block;
    margin-top: 10px;
    color: #585960;
    text-transform: none;
    font-size: 17px;
  }
  .pg-kitec-grid .back {
    position: absolute;
    right: calc(((100vw - (38vw + 310px)) / 2) + 1.5rem);
  }
  .pg-kitec-grid .article-wrap {
    margin-top: 80px;
    padding: 0;
  }
  .pg-kitec-grid .article {
    height: 100%;
    width: calc(38vw + 280px);
    margin: 0 auto;
    grid-template-rows: 10vw 2rem 12vw auto auto;
    grid-template-columns: 1.5rem 30% 1fr 1.5rem;
    grid-template-areas: '... ... img ...' 'number ... img ...' '... title img ...' '... intro img ...' '... desc img ...';
  }
  .pg-kitec-grid .article__title {
    grid-column-end: 4;
    margin: 0;
  }
  .pg-kitec-grid .article__intro {
    margin: 1.5rem 0;
  }
  .pg-kitec-grid .article__img-wrap {
    align-self: end;
    width: 100%;
    height: 100%;
    margin: 0;
  }
  .pg-kitec-grid .article__img {
    background-position: 50% 50%;
  }
}
@media screen and (max-width: 1023px) {
  .pg-kitec-grid .item-wrap {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 20px;
  }
}
@media screen and (max-width: 767px) {
  .pg-kitec-grid .item-wrap {
    grid-gap: 10px;
  }
}