[section="slideshow"] {
  height: var(--slideshow-height);
  display: inline-flex;
  position: relative;

  /* Slides */
}

[section="slideshow"] .slideshow-wrapper {
    overflow: hidden;
    border-radius: var(--radius-lg);
  }

:is([section="slideshow"] .slideshow-wrapper) .wrapper-box {
      height: 100%;
      width: calc(100vw - var(--spacing-24));
      display: flex;
      position: relative;
      inset-inline-start: var(--spacing-0);
      transition: 0.6s;
    }

:is(:is([section="slideshow"] .slideshow-wrapper) .wrapper-box) [block="slideshow-slide"] {
        min-width: 100%;
        position: relative;
        background-color: var(--color-surface-container);
      }

:is(:is(:is([section="slideshow"] .slideshow-wrapper) .wrapper-box) [block="slideshow-slide"]) img {
          object-fit: cover;
          user-select: none;
          pointer-events: none;
        }

:is(:is(:is([section="slideshow"] .slideshow-wrapper) .wrapper-box) [block="slideshow-slide"]) > [ui-icon] {
          opacity: 0.3;
          position: absolute;
          translate: -50% -50%;
          left: 50%;
          inset-block-start: 50%;
        }

:is(:is(:is([section="slideshow"] .slideshow-wrapper) .wrapper-box) [block="slideshow-slide"]) .content {
          max-width: 30%;
          position: absolute;
          inset-inline-start: var(--spacing-24);
          inset-block-end: var(--spacing-24);
          border-radius: var(--radius-lg);
          background-color: var(--color-background);
          padding: calc(var(--spacing-48) - var(--spacing-8));
          display: grid;
          gap: var(--spacing-24);
        }

:is(:is(:is(:is([section="slideshow"] .slideshow-wrapper) .wrapper-box) [block="slideshow-slide"]) .content) .text {
            display: grid;
            gap: var(--spacing-8);
          }

:is(:is(:is(:is(:is([section="slideshow"] .slideshow-wrapper) .wrapper-box) [block="slideshow-slide"]) .content) .text) .title {
              font: var(--font-headline-lg);
            }

:is(:is(:is(:is(:is([section="slideshow"] .slideshow-wrapper) .wrapper-box) [block="slideshow-slide"]) .content) .text) .description {
              text-wrap: balance;
              font: var(--font-body-lg);
              color: var(--color-on-surface-variant);
            }

:is(:is(:is(:is([section="slideshow"] .slideshow-wrapper) .wrapper-box) [block="slideshow-slide"]) .content) .action {
            color: inherit;
            width: fit-content;
          }

/* Arrows */

[section="slideshow"] .slideshow-arrows {
    left: 50%;
    position: absolute;
    translate: -50% -50%;
    inset-block-start: 50%;
    display: flex;
    justify-content: space-between;
    width: calc(100% - var(--spacing-48));
  }

:is([section="slideshow"] .slideshow-arrows) > button {
      border: none;
      outline: none;
      width: 40px;
      height: 40px;
      cursor: pointer;
      border-radius: var(--radius-sm);
      color: white;
      background-color: var(--color-overlay);
      display: flex;
      align-items: center;
      justify-content: center;
      transition: var(--transition-standard-default-effects);
    }

:is(:is([section="slideshow"] .slideshow-arrows) > button):dir(rtl) {
        rotate: 180deg;
      }

:is(:is([section="slideshow"] .slideshow-arrows) > button):active:not(:disabled) {
        scale: 0.95;
      }

:is(:is([section="slideshow"] .slideshow-arrows) > button):disabled {
        cursor: not-allowed;
        opacity: 0.5;
      }

/* Pagination */

[section="slideshow"] .slideshow-pagination {
    left: 50%;
    position: absolute;
    translate: -50% -50%;
    inset-block-end: var(--spacing-24);
    display: flex;
    overflow: hidden;
    border-radius: var(--radius-rounded);
    background-color: var(--color-overlay);
  }

:is([section="slideshow"] .slideshow-pagination) > button {
      width: 20px;
      height: 30px;
      border: none;
      outline: none;
      cursor: pointer;
      background-color: transparent;
      display: flex;
      align-items: center;
      justify-content: center;
    }

:is(:is([section="slideshow"] .slideshow-pagination) > button):first-child,:is(:is([section="slideshow"] .slideshow-pagination) > button):last-child {
        width: 25px;
      }

:is(:is([section="slideshow"] .slideshow-pagination) > button)::before {
        content: "";
        display: block;
        width: 10px;
        height: 10px;
        clip-path: circle();
        opacity: 0.5;
        background-color: white;
      }

[aria-selected="true"]:is(:is([section="slideshow"] .slideshow-pagination) > button)::before {
        opacity: 1;
      }

/* Responsive */
@media (max-width: 1024px) {
          :is(:is(:is([section="slideshow"] .slideshow-wrapper) .wrapper-box) [block="slideshow-slide"]) .content {
            max-width: 300px;
            padding: calc(var(--spacing-24) + var(--spacing-8));
          }
              :is(:is(:is(:is(:is([section="slideshow"] .slideshow-wrapper) .wrapper-box) [block="slideshow-slide"]) .content) .text) .title {
                font: var(--font-title-lg);
              }

              :is(:is(:is(:is(:is([section="slideshow"] .slideshow-wrapper) .wrapper-box) [block="slideshow-slide"]) .content) .text) .description {
                display: none;
              }

    [section="slideshow"] .slideshow-pagination {
      display: none;
    }
}

@media (max-width: 769px) {
          :is(:is(:is([section="slideshow"] .slideshow-wrapper) .wrapper-box) [block="slideshow-slide"]) .content {
            width: 100%;
            max-width: calc(100% - var(--spacing-48));
            padding: calc(var(--spacing-24) - var(--spacing-4));
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            justify-content: space-between;
          }
              :is(:is(:is(:is(:is([section="slideshow"] .slideshow-wrapper) .wrapper-box) [block="slideshow-slide"]) .content) .text) .title {
                text-wrap: balance;
                font: var(--font-title-md);
              }

    [section="slideshow"] .slideshow-pagination {
      display: none;
    }
      [section="slideshow"]:not(:has(.slideshow-arrows)) .slideshow-wrapper {
        overflow-x: scroll;
        scroll-behavior: smooth;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
        -ms-overflow-style: none;
        -webkit-overflow-scrolling: touch;
      }

        :is([section="slideshow"]:not(:has(.slideshow-arrows)) .slideshow-wrapper) [block="slideshow-slide"] {
          scroll-snap-align: center;
          scroll-snap-stop: always;
        }
}