&:root {
  --color-blue: #111C35;
  --color-red: #BD2F2C;

  --font-degular: 'degular', sans-serif;
  --font-lintel: 'lintel', sans-serif;
  --font-ivy: "ivypresto-display", serif;
}

html,
body {
  scroll-behavior: smooth;
}

.culture-hero {
  align-items: center;
  aspect-ratio: 960 / 1080;
  background: url(/img/culture/hero.v2.jpg) no-repeat right top;
  display: flex;
  max-height: 1080px;
  position: relative;
  width: 100%;

  .culture-hero__grid {
    border-top: 1px solid #707070;
    height: 100%;
    isolation: isolate;
    left: 0;
    margin-block-start: 1px;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 0;
  }

  .culture-hero__grid-row {
    border-bottom: 1px solid #707070;
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    /* height: 16.67vh;
    max-height: 180px; */
    height: 180px;
  
    & > div {
      background: #fff;

      &:not(:last-child) {
        border-right: 1px solid #707070;
      }

      &.--transparent {
        background: transparent;
      }
    }
  }
  
  .culture-hero__content {
    background: var(--color-blue);
    color: #fff;
    padding: 4rem;
    position: relative;
    width: min(100%, 877px);
    z-index: 10;

    @media screen and (min-width:1400px) {
      padding: 4rem 5rem;
    }

    h1 {
      font-family: var(--font-lintel);
      font-size: 40px;
      line-height: 1.1;
      margin-block-end: 1.5rem;
      width: min(100%, 15ch);

      @media screen and (min-width: 1024px) { font-size: 48px; }
      @media screen and (min-width: 1200px) { font-size: 52px; }
      @media screen and (min-width: 1300px) { font-size: 58px; }
      @media screen and (min-width: 1400px) { font-size: 64px; }
    }

    p {
      font-family: sans-serif;
      font-size: 19px;
      line-height: 1.35;
      margin-block: 0;
      text-wrap: pretty;
    }
  }
}

.culture__hear {
  padding: 7rem 1.5rem;
  position: relative;

  .culture__hear-grid {
    height: 100%;
    isolation: isolate;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 0;
  }

  .culture__hear-grid-row {
    border-bottom: 1px solid #707070;
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    /* height: 14.9vh;
    max-height: 160px; */
    height: 180px;

    & > div {
      &:not(:last-child) {
        border-right: 1px solid #707070;
      }
    }
  }

  .culture__hear-content {
    margin-inline: auto;
    position: relative;
    width: min(1488px, 100%);
    z-index: 1;
  }

  h3 {
    color: #bc2f2c;
    font-family: 'lintel';
    font-size: 42px;
    line-height: 1.1;
    margin: 0 0 1.5rem;
    text-align: center;
    text-transform: uppercase;

    @media screen and (min-width:1500px) { font-size: 48px; }
    @media screen and (min-width:1700px) { font-size: 52px; }
  }

  p {
    font-family: var(--font-degular);
    font-size: 19px;
    font-weight: 500;
    line-height: 1.35;
    margin-block: 0 4rem;
    margin-inline: auto;
    line-height: 1.25;
    text-align: center;
    text-wrap: pretty;
    width: min(100%, 1000px);

    @media screen and (min-width:1400px) { font-size: 20px; }
    @media screen and (min-width:1500px) { font-size: 21px; }
    @media screen and (min-width:1700px) { font-size: 23px; }
  }

  .culture__hear-carousel {
    overflow: hidden;
    position: relative;
    width: 100%;
  }

  .culture__hear-carousel-items {
    align-items: flex-start;
    display: flex;
    flex-wrap: nowrap;
    transition: translate .6s ease;
    translate: 1.5rem 0;
    width: 9999rem;
  }

  .culture__hear-carousel-item {
    color: inherit;
    display: inline-block;
    max-width: 480px;
    position: relative;
    text-align: center;
    text-decoration: none;
    width: 25vw;

    @media screen and (min-width:1488px) {
      width: 480px;
    }

    &.--has-hover,
    &:hover {
      .culture__hear-carousel-item-overlay {
        opacity: 1;
      }
    }
  }

  .culture__hear-carousel-item-overlay {
    align-items: center;
    background: rgba(30, 39, 68, 0.6);
    border-bottom: 8px solid var(--color-red);
    color: #fff;
    display: flex;
    flex-direction: column;
    font-family: var(--font-degular);
    font-size: 30px;
    font-weight: 500;
    gap: .5rem;
    height: 100%;
    justify-content: center;
    left: 0;
    line-height: 1;
    opacity: 0;
    padding: 1rem;
    position: absolute;
    text-transform: uppercase;
    top: 0;
    transition: opacity .4s ease;
    width: 100%;
    z-index: 20;

    span {
      font-size: 16px;
      text-transform: none;
    }

    @media screen and (min-width:1200px) {
      font-size: 30px;
    }
  }

  .culture__hear-carousel-item-img {
    position: relative;
    margin-inline: auto;
    width: min(100%, 322px);

    img {
      display: inline-block;
      margin: 0;
    }
  }

  .culture__hear-carousel-item-content {
    background: #fff;
    font-family: var(--font-degular);
    font-size: 22px;
    font-weight: 500;
    padding: 1rem;

    span { display: block; }
    span:first-child { color: var(--color-red); }
  }

  .culture__hear-carousel-nav {
    background: 0;
    border: 0;
    cursor: pointer;
    left: 0;
    outline: 0;
    padding: 0;
    position: absolute;
    top: calc(50% - 16px);
    translate: 0 -50%;
    z-index: 10;

    &.--prev {
      
    }

    &.--next {
      left: auto;
      right: 0;
    }

    &:disabled {
      opacity: .4;
    }
  }
}

.culture__break {
  img {
    display: block;
    margin: 0;
    width: 100%;
  }
}

.culture__stat {
  padding: 6rem 1.5rem;

  .culture__stat-container {
    align-items: center;
    column-gap: 3rem;
    display: grid;
    grid-template-columns: 320px 1fr;
    margin-inline: auto;
    width: min(100%, 1300px);
  }

  .culture__stat-box {
    align-items: center;
    background: #1D2645;
    color: #fff;
    display: flex;
    flex-direction: column;
    height: 320px;
    justify-content: center;
    padding-inline: 1rem;
    padding-block: 1rem 2rem;

    span { line-height: 1; }

    span:first-child {
      color: var(--color-red);
      font-family: var(--font-degular);
      font-size: 112px;
      font-weight: 500;
      
      &:after {
        border-top: 4px solid var(--color-red);
        content: '';
        display: block;
        margin-block: .75rem 1.5rem;
        margin-inline: auto;
        width: 84px;
      }
    }

    span:last-child {
      font-family: var(--font-degular);
      font-size: 18px;
      font-weight: 500;
      line-height: 1.3;
      text-align: center;
      width: min(100%, 220px);
    }
  }

  .culture__stat-content {
    h2, p {
      margin-inline: auto;
      width: min(100%, 870px);
    }

    h2 {
      color: var(--color-red);
      font-family: var(--font-degular);
      font-size: 60px;
      font-weight: 500;
      line-height: 1.1;
      margin-block: 0 2rem;
      margin-inline: 0;
    }

    p {
      font-family: var(--font-degular);
      font-size: 19px;
      font-weight: 500;
      line-height: 1.35;
      margin-block: 0 4rem;
      margin-inline: auto;
      line-height: 1.25;
      text-wrap: pretty;
      width: min(100%, 1000px);

      @media screen and (min-width:1400px) { font-size: 20px; }
      @media screen and (min-width:1500px) { font-size: 21px; }
      @media screen and (min-width:1700px) { font-size: 23px; }
    }
  }
}

.culture-ftr {
  align-items: center;
  aspect-ratio: 1920 / 800;
  /* background: url(/img/culture/ftr.v1.jpg) no-repeat center center; */
  background-size: contain;
  border-top: 1px solid #707070;
  display: flex;
  height: 805px;
  justify-content: center;
  max-height: 800px;
  position: relative;
  width: 100%;

  .culture-ftr__grid {
    height: 100%;
    isolation: isolate;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 0;

    .cultur-ftr__img {
      position: absolute;
      width: 16.67%;
      height: calc(161px * 2);

      img {
        height: 100%;
        object-fit: cover;
        width: 100%;
      }

      &.--1 {
        left: 8.3%;
        top: 0;
      }

      &.--2 {
        left: calc(50% - 1px);
        top: 0;
        width: calc(16.67% + 1px);
      }

      &.--3 {
        right: 0;
        top: 0;
      }

      &.--4 {
        bottom: -5px;
        left: 0;
      }

      &.--5 {
        bottom: 0;
        left: calc((8.3% * 5) + 2px);
        translate: 0 30%;
        width: calc(16.67% + 1px);
      }

      &.--6 {
        bottom: -5px;
        right: calc(8.3% + 1px);
      }
    }
  }

  .culture-ftr__grid-row {
    display: grid;
    gap: 0;
    grid-template-columns: repeat(12, 1fr);
    /* height: 8.33vw;
    max-height: 160px; */
    height: 161px;

    & > div {
      background: #fff;
      border-bottom: 1px solid #707070;

      &:not(:last-child) {
        border-right: 1px solid #707070;
      }

      &.--transparent {
        background: transparent;
      }
      
      &.--no-br {
        border-right: 0;
      }

      &.--no-bb {
        border-bottom: 0;
      }
    }
  }

  .culture-ftr__content {
    align-items: center;
    aspect-ratio: 960 / 480;
    background: #fff;
    /* border: 1px solid #707070; */
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 480px;
    max-width: 49vw;
    padding: 1.5rem;
    position: relative;
    translate: 0 3px;
    z-index: 10;

    p {
      font-family: var(--font-degular);
      font-size: 28px;
      font-weight: 500;
      line-height: 1.05;
      margin-block: 0 2rem;
      text-align: center;
      text-wrap: pretty;

      @media screen and (min-width:768px) { font-size:32px; }
      @media screen and (min-width:1024px) { font-size:36px; }
      @media screen and (min-width:1200px) { font-size:38px; }
      @media screen and (min-width:1320px) { font-size:40px; }
      @media screen and (min-width:1400px) { font-size:42px; }
      @media screen and (min-width:1460px) { font-size:44px; }
      @media screen and (min-width:1500px) { font-size:46px; }
      @media screen and (min-width:1580px) { font-size:48px; }
      @media screen and (min-width:1660px) { font-size:50px; }
    }

    a {
      align-items: center;
      background: var(--color-red);
      border: 0;
      color: #fff;
      cursor: pointer;
      display: inline-flex;
      font-family: var(--font-degular);
      font-size: 22px;
      font-weight: 500;
      height: 48px;
      line-height: 1;
      padding: 0 1.5rem;
      text-decoration: none;
    }
  }
}

.culture__logos {
  overflow: hidden;

  .culture__logos-container {
    animation-name: logos_scroll;
    animation-duration: 480s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    align-items: center;
    display: flex;
    gap: 4rem;
    transform: translateX(100vw);
    width: 2156.375rem;
  }
}

@keyframes logos_scroll {
  0% {
    transform: translateX(100vw);
  }
  100% {
    transform: translateX(-100%);
  }
}