/*
 * DO NOT EDIT THIS FILE.
 * It's generated automatically by 'npm run build' command.
 * @preserve
 */

  .auto-scroller {
  margin-bottom: 1.875rem;
  overflow: hidden;
}

  @media (max-width: 767.98px) {

  .auto-scroller {
    overflow: visible
}
  }

  .auto-scroller__title h2 {
      font: var(--font-primary-h1-default);
      font-weight: 300;
      margin-bottom: 0.9375rem;
      text-align: center;
    }

  .auto-scroller__description {
    font: var(--font-primary-body-default);
    font-weight: 300;
    margin-bottom: 1.5625rem;
    text-align: center;
  }

  .auto-scroller__footer {
    font: var(--font-primary-h1-default);
    padding: 0 1.25rem;
    margin: 1.25rem auto;
    width: 100%;
    text-align: center;
  }

  @media (min-width: 768px) {

  .auto-scroller__footer {
      width: 80%
  }
    }

  .auto-scroller__scroller {
    position: relative;
    color: var(--colors-white-10);
    overflow: hidden;
  }

  @media (min-width: 1024px) {

  .auto-scroller__scroller {
      max-width: var(--container-max-widths-xl);
      padding-bottom: 0;
      position: relative;
      min-height: 25.3125rem;
      height: 25.3125rem;
      max-height: 43.75rem;
      display: flex
  }
    }
.auto-scroller-item {
  padding: 0;
  display: flex;
  flex-direction: column;
  flex: 1;
  transition: flex 300ms ease-in-out;
  box-sizing: border-box;
  position: relative;
}
@media (max-width: 1023.98px) {
.auto-scroller-item {
    padding: 2.5rem 1.875rem 1.875rem;
    width: 100%;
    position: relative;
    height: auto!important; /* Overriding the JS equal heights. */
    background-color: rgb(19 36 64 / 70%);
    background-blend-mode: multiply
}
  }
@media (min-width: 1024px) {
.auto-scroller-item {
    flex-direction: column-reverse
}
  }
.auto-scroller-item__title {
    font: var(--font-primary-h4-default);
    font-weight: 300;
    margin-bottom: 0;
    padding: 2.5rem 1.875rem 3.75rem;
    color: var(--colors-white-10);
    background-color: rgb(19 36 64 / 70%);
  }
@media (max-width: 1023.98px) {
.auto-scroller-item__title {
      order: 1;
      padding: 0;
      background: none
  }
    }
@media (min-width: 1024px) {
.auto-scroller-item__title {
      position: absolute;
      bottom: 0;
      width: 100%
  }
    }
.auto-scroller-item__image {
    height: 100%;
  }
@media (max-width: 1023.98px) {
.auto-scroller-item__image {
      z-index: -1;
      position: absolute;
      top: 0;
      left: 0;
      width: 100%
  }
    }
.auto-scroller-item__image img {
      height: 100%;
      -o-object-fit: cover;
      object-fit: cover;
      width: 100%;
    }
.auto-scroller-item__accordion {
    text-align: right;
    margin-top: 1.25rem;
    order: 3;

  }
@media (min-width: 1024px) {
.auto-scroller-item__accordion {
      display: none

  }
    }
.auto-scroller-item__accordion__icon::before {
        font-family: Material Icons;
        content: '\e5cf';
        font-size: 1.625rem;
        border-radius: 100%;
        border: 0.0625rem solid var(--colors-white-10);
        padding: 0.125rem 0.0625rem 0.0625rem;
      }
.auto-scroller-item__content {
    margin: 0 auto;
    width: 100%;
    display: flex;
    flex-direction: column;
    height: auto;
    text-align: left;
    color: var(--colors-white-10);
    background-color: rgb(19 36 64 / 70%);
    background-blend-mode: multiply;
  }
@media (min-width: 1024px) {
.auto-scroller-item__content {
      opacity: 0;
      justify-content: end;
      min-height: 7.8125rem;
      position: absolute;
      padding: 1.875rem
  }
    }
@media (max-width: 1023.98px) {
.auto-scroller-item__content {
      background: none;
      padding: 0;
      display: grid;
      grid-template-rows: 0fr;
      transition: grid-template-rows 0.5s ease;
      overflow: hidden;
      order: 2
  }
    }
.auto-scroller-item__content-desc {
      margin-top: 1rem;
      overflow: hidden;

    }
.auto-scroller-item__content-title {
      font: var(--font-primary-h4-default);
      font-weight: 300;
      margin-bottom: 0;
    }
@media (max-width: 1023.98px) {
.auto-scroller-item__content-title {
        margin-bottom: 0.75rem;
        display: none
    }
      }
.auto-scroller-item__content p {
      font: var(--font-primary-small-default);
      font-weight: 300;
    }
@media (max-width: 1023.98px) {
.auto-scroller-item__content p {
        margin-bottom: 1.25rem
    }
      }
.auto-scroller-item .btn {
    font: var(--font-primary-caption-default);
    padding: 0.5rem 0.625rem;
    background-color: transparent;
    border: 0.0625rem solid var(--colors-white-10);
    display: inline-block;
    cursor: pointer;
    color: var(--colors-white-10);
    text-decoration: none;
    min-width: 10.625rem;
    text-align: center;
    text-transform: uppercase;
  }
.auto-scroller-item .btn:hover {
      background-color: var(--colors-white-10);
      color: var(--colors-sea-green-60);
    }
.auto-scroller-item .btn:active {
      position: relative;
      top: 0.0625rem;
    }
@media (min-width: 1024px) {
.auto-scroller-item.active {
      flex: 2
  }
    }
@media (min-width: 1024px) {
.auto-scroller-item.active .auto-scroller-item__content {
          height: 100%;
          opacity: 1;
          transition: opacity 250ms ease-in-out;
          transition-delay: 250ms
      }
        }
@media (max-width: 1023.98px) {
.auto-scroller-item.active .auto-scroller-item__content {
          grid-template-rows: 1fr
      }
        }
.auto-scroller-item.active .auto-scroller-item__accordion-icon::before {
            content: '\e5ce';
          }
@media (min-width: 1024px) {
.auto-scroller-item.active .auto-scroller-item__title {
          display: none
      }
        }
@media (min-width: 1024px) {
.auto-scroller-item.active .auto-scroller-item__content-desc,
      .auto-scroller-item.active .auto-scroller-item__content-title {
          display: block
      }
        }