/*
 * The main mission section.
 *
 * Edit this file. It is served as it is — nothing compiles it, and the
 * order it loads in is set in resources/css/order.php.
 */

.mission-container {
  --perspective:3000px;
  --grid-item-ratio:1.5;
  --grid-width:100%;
  --grid-height:auto;
  --grid-gap:2vw;
  --grid-columns:3;
  --grid-inner-scale:1;
  background-color:#e1251b;
  overflow:hidden;
  position:relative;
}

@media screen and (max-width:1199px) {

  .mission-container {
    --grid-item-ratio:0.8;
    --grid-width:90%;
    overflow:visible;
  }
}

@media (max-width:900px)and (orientation:landscape),screen and (max-width:767px) {

  .mission-container {
    --grid-width:80%;
  }
}

.mission-container .content {
  height:100%;
  position:relative;
}

.mission-container .grid {
  display:grid;
  overflow:clip;
  overflow:hidden;
  padding:2rem;
  perspective:var(--perspective,2000px);
  perspective-origin:0 50%;
  place-items:center;
  transform-style:preserve-3d;
  -webkit-transform-style:preserve-3d;
  width:100%;
}

@media (max-width:900px)and (orientation:landscape),screen and (max-width:767px) {

  .mission-container .grid {
    overflow:hidden;
  }
}

.mission-container .grid-wrap {
  gap:var(--grid-gap);
  grid-template-columns:repeat(var(--grid-columns),1fr);
  height:var(--grid-height);
  width:var(--grid-width);
}

.mission-container .grid-wrap,
.mission-container .grid__item {
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
  display:grid;
  transform-style:preserve-3d;
  -webkit-transform-style:preserve-3d;
}

.mission-container .grid__item {
  aspect-ratio:var(--grid-item-ratio);
  overflow:visible;
  place-items:center;
  position:relative;
  width:100%;
  will-change:transform,filter;
}

.mission-container .grid__item-inner {
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
  background-position:50% 50%;
  background-size:cover;
  height:calc(1/var(--grid-inner-scale)*100%);
  position:relative;
  width:calc(1/var(--grid-inner-scale)*100%);
}

.mission-layout {
  align-items:start;
  background-color:#e1251b;
  display:grid;
  gap:2rem;
  grid-template-columns:minmax(0,1fr) 30%;
  overflow:visible;
  position:relative;
}

@media screen and (max-width:1199px) {

  .mission-layout {
    grid-template-columns:repeat(2,1fr);
    overflow:visible;
  }
}

@media (max-width:900px)and (orientation:landscape),screen and (max-width:767px) {

  .mission-layout {
    grid-template-columns:repeat(2,1fr);
    overflow:visible;
  }
}

@media screen and (max-width:1199px) {

  .mission-left {
    grid-column:1/-1;
    grid-row:1;
  }
}

@media (max-width:900px)and (orientation:landscape),screen and (max-width:767px) {

  .mission-left {
    grid-column:1/-1;
    grid-row:1;
  }
}

.main-mission__text {
  --height:400px;
  color:#fff;
  display:flex;
  flex-direction:column;
  grid-column:1/-1;
  grid-row:1;
  height:var(--height);
  justify-content:center;
  left:60%;
  margin:0 auto;
  max-width:40%;
  padding:0;
  position:-webkit-sticky;
  position:sticky;
  top:calc(var(--mobile-vh)*40);
  transform:none;
  will-change:auto;
  z-index:2;
}

@media screen and (max-width:1199px) {

  .main-mission__text {
    --height:400px;
    align-items:center;
    left:unset;
    margin:0 auto;
    max-width:unset;
    text-align:center;
    top:0;
    top:calc(var(--mobile-vh)*50 - var(--height)/2);
    width:min(92vw,680px);
  }
}

@media (max-width:900px)and (orientation:landscape),screen and (max-width:767px) {

  .main-mission__text {
    margin:0 auto;
    width:min(92vw,680px);
  }
}

.main-mission__eyebrow-line {
  background-color:#fff;
  display:block;
  height:3px;
  margin-bottom:18px;
  width:40px;
}

@media screen and (max-width:1440px) {

  .main-mission__eyebrow-line {
    margin-bottom:14px;
    width:32px;
  }
}

.main-mission__text-header {
  margin-bottom:76px;
}

@media screen and (max-width:1199px) {

  .main-mission__text-header {
    margin-bottom:32px;
  }
}

@media (max-width:900px)and (orientation:landscape),screen and (max-width:767px) {

  .main-mission__text-header {
    margin-bottom:25px;
  }
}