flynt-component[name='SliderImages'] {
  .slider {
    background-color: var(--color-border);
    overflow: hidden;
    position: relative;

    &:not(.swiper-initialized) {
      .swiper-wrapper .swiper-slide:not(:first-child) {
        display: none;
      }
    }

    &-item {
      block-size: 0;
      padding-block-end: calc((2/3) * 100%);
      position: relative;
    }

    &-button {
      align-items: center;
      block-size: 48px;
      color: var(--color-background);
      cursor: pointer;
      display: flex;
      inline-size: 48px;
      inset-block-start: 50%;
      justify-content: center;
      position: absolute;
      translate: 0 -50%;
      z-index: 10;

      &::before {
        background-color: var(--color-accent);
        block-size: 100%;
        border-radius: 50%;
        content: '';
        inline-size: 100%;
        inset-block-start: 0;
        inset-inline-start: 0;
        position: absolute;
        transition: opacity 0.2s ease;
        will-change: opacity;
      }

      &.swiper-button-disabled {
        opacity: 0.5;
        pointer-events: none;
      }

      &--prev {
        inset-inline-start: 15px;

        &::after {
          block-size: 0.75em;
          border-block-start: 2px solid currentColor;
          border-inline-start: 2px solid currentColor;
          content: '';
          inline-size: 0.75em;
          margin-inline-start: calc(0.25em + 2px);
          rotate: -45deg;
        }
      }

      &--next {
        inset-inline-end: 15px;

        &::after {
          block-size: 0.75em;
          border-block-start: 2px solid currentColor;
          border-inline-end: 2px solid currentColor;
          content: '';
          inline-size: 0.75em;
          margin-inline-end: calc(0.25em - 2px);
          rotate: 45deg;
        }
      }
    }
  }

  .figure {
    inset: 0;
    margin-block-end: 0;
    position: absolute;

    &-image {
      block-size: 100%;
      inline-size: auto;
      margin-block: 0;
      margin-inline: auto;
    }

    &-caption {
      color: #fff;
      display: inline-block;
      inset-block-end: 0;
      inset-inline-end: 0;
      max-inline-size: 450px;
      overflow: hidden;
      padding-block: 0.25rem;
      padding-inline: 0.5rem;
      position: absolute;
      z-index: 2;

      &::before {
        background-color: rgba($color: #000, $alpha: 0.7);
        block-size: 100%;
        content: '';
        inline-size: 100%;
        inset-block-start: 0;
        inset-inline-start: 0;
        position: absolute;
        z-index: -1;
      }
    }
  }
}
