.g-featured-slider {
  & .logo-bar-container {
    display: flex;
    padding: 32px 0;
    align-items: center;
    justify-content: center;

    & .logo-bar {
      flex-basis: 33.333%;
      cursor: pointer;
      position: relative;
      transition: transform 0.2s ease;
      margin-right: 32px;

      &:last-child {
        margin-right: 0;
      }

      & .logo-container {
        height: 84px;
        text-align: center;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        padding: 24px;

        & picture,
        & img {
          object-fit: contain;
          width: 100%;
          height: 100%;
        }

        @media (min-width: 768px) {
          height: 92px;
          padding: 32px;
        }
      }

      & .progress-bar {
        width: 100%;
        height: 2px;
        display: block;
        background-color: var(--DEPRECATED-gray-9);

        &.dark {
          background-color: var(--DEPRECATED-gray-3);
        }

        & span {
          width: 0;
          background-color: var(--brand);
          height: 100%;
          display: block;
          animation-duration: 10s;
          &.nomad {
            background-color: var(--nomad);
          }
          &.consul {
            background-color: var(--consul);
          }
          &.terraform {
            background-color: var(--terraform);
          }
          &.active {
            animation-name: case-study-bar;
            animation-timing-function: linear;
          }
        }
      }

      &:hover {
        transform: translateY(-4px);
      }
    }

    /* When there are two case studies */
    &.double {
      & .logo-bar {
        flex-basis: 50%;
      }
    }

    @media (min-width: 768px) {
      padding: 0 0 48px;
    }
  }

  & .feature-container {
    overflow: hidden;

    & .slider-container {
      transition: transform 400ms ease-out;

      & .slider-frame {
        & .feature {
          & .feature-image {
            margin-bottom: 2rem;

            & img,
            & picture {
              width: 100%;
              height: auto;
            }
          }

          & .feature-content {
            text-align: center;

            & h3 {
              margin: 0 0 8px;
            }

            & .single-logo {
              margin-bottom: 32px;
              width: 100%;
              height: 65px;

              & picture,
              & img {
                height: 100%;
                width: auto;
              }
            }

            & .g-btn {
              margin-top: 32px;
            }
          }

          @media (min-width: 768px) {
            display: flex;
            flex-direction: row;
            flex-wrap: nowrap;
            align-items: center;

            & .feature-image {
              margin-bottom: 0;
              flex-basis: 60%;
              margin-right: 64px;
            }

            & .feature-content {
              flex-basis: 40%;
              text-align: left;

              & p {
                margin: 0;

                & + p {
                  margin-top: 1em;
                }
              }
            }
          }
        }

        &.single {
          & .case-study {
            align-items: flex-start;
          }
        }
      }
    }
  }
}

@keyframes case-study-bar {
  0% {
    width: 0;
  }
  100% {
    width: 100%;
  }
}