@media all {
  .ce-type-wf_timeline {
    position: relative;

    .swiper-timeline {
      display: flex;
      flex-direction: column;
      grid-column: 1 / -1;
      width: 100%;
      height: 100%;

      .swiper-wrapper {
        padding-top: 1rem;
      }

      .swiper-slide {
        width: 100%;
        background-color: var(--color-white);
        box-shadow: var(--box-shadow);
        border-radius: var(--border-radius);

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

      .timeline-card {
        padding: 1rem;
      }

      .ce-header {
        padding-bottom: var(--element-gap);

        h4 {
          font-weight: 400;
        }
      }
    }

    .background {
      height: 50%;
    }
  }

  .swiper-button-next,
  .swiper-button-prev {
    display: none;
  }
}

@media (min-width: 62rem) {
  .ce-type-wf_timeline {
    .swiper-timeline {
      .timeline-card {
        padding: 2rem;
        font-size: calc(18/20*1em);
      }
    }
  }
  .swiper-button-next,
  .swiper-button-prev {
    display: flex;
    background-color: var(--color-grey);
    color: var(--color-white);
    border-radius: 50%;
    font-weight: bold;
    width: 3rem;
    height: 3rem;
    --swiper-navigation-size: 2rem;
  }
  .swiper-button-next:hover,
  .swiper-button-next:focus,
  .swiper-button-prev:hover,
  .swiper-button-prev:focus {
    background-color: var(--color-grey);
    color: var(--color-orange);
  }
}