Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URLs added here will be added as <link>s in order, and before the CSS in the editor. You can use the CSS from another Pen by using its URL and the proper URL extension.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <aside style="display: none" class="banner">
  <div class="banner__inner">
    This browser currently doesn't support Shared Element
    Transitions API. Use Chrome 104+ or Canary with
    <b>chrome://flags/#document-transition</b> enabled to view the
    example.
  </div>
</aside>
<main>
  <section class="album">
    <aside class="album__summary">
      <figure class="">
        <section class="gallery">
          <img src="https://res.cloudinary.com/adrianbece/image/fetch/f_auto/https://i.discogs.com/0WMXqWHEYWikcm64MZHfgZrdxwilrgWT6W7YSNfp2Jw/rs:fit/g:sm/q:90/h:544/w:600/czM6Ly9kaXNjb2dz/LWRhdGFiYXNlLWlt/YWdlcy9SLTQyMDEz/ODUtMTQ3Njk1NTM1/My01OTY0LmpwZWc.jpeg" alt="" id="js-gallery" decoding="sync" loading="eager" />
          <aside class="gallery__controls">
            <div class="gallery__status">
              <span id="js-gallery-index">1</span> / 11
            </div>
            <button onclick="previousImage()" class="gallery__button">
              <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
                <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 12h-15m0 0l6.75 6.75M4.5 12l6.75-6.75" />
              </svg>
            </button>
            <button onclick="nextImage()" class="gallery__button">
              <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
                <path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12h15m0 0l-6.75-6.75M19.5 12l-6.75 6.75" />
              </svg>

            </button>
          </aside>
        </section>
      </figure>
      <dl class="album__section">
        <dt>Artist - Album title</dt>
        <dd>Anthem - Eternal Warrior</dd>
        <dt>Release year</dt>
        <dd>2004</dd>
        <dt>Country / Region</dt>
        <dd>Japan</dd>
        <dt>Genre</dt>
        <dd>Heavy Metal</dd>
        <dt>Labels</dt>
        <dd>
          <ul class="album__list">
            <li>Victor - VICP-62775</li>
          </ul>
        </dd>
      </dl>
    </aside>
  </section>
</main>
<footer class="footer">
  <section class="footer__wrapper">
    <article class="footer__content">
      Created with
      <i class="fa-solid fa-heart footer__icon"></i>
      and
      <i class="fa-solid fa-music footer__icon"></i>
      by
      <a class="footer__content-link" href="https://twitter.com/AdrianBeceDev" target="_blank" rel="noopener noreferrer">Adrian Bece</a>
    </article>
    <ul class="footer__links">
      <li class="footer__item">
        <a href="https://twitter.com/AdrianBeceDev" target="_blank" class="footer__link" rel="noopener noreferrer"><i class="fa-brands fa-twitter"></i></a>
      </li>
      <li class="footer__item">
        <a href="https://www.linkedin.com/in/adrianbece/" target="_blank" class="footer__link" rel="noopener noreferrer"><i class="fa-brands fa-linkedin-in"></i></a>
      </li>
      <li class="footer__item">
        <a href="https://github.com/codeAdrian" target="_blank" class="footer__link" rel="noopener noreferrer"><i class="fa-brands fa-github-alt"></i></a>
      </li>
    </ul>
  </section>
</footer>
              
            
!

CSS

              
                
@supports not (page-transition-tag: supports-tag) {
    .banner {
        display: block !important;
    }

    body {
        padding-top: 5rem;
    }
}

.banner {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background-color: #fae588;
    text-align: center;
    z-index: 5;
}

.banner__inner {
    padding: 1rem 2rem;
    max-width: 720px;
    margin: 0 auto;
}

@media (prefers-reduced-motion) {
    ::page-transition-container(*),
    ::page-transition-outgoing-image(*),
    ::page-transition-incoming-image(*) {
        animation: none !important;
    }
}

.footer {
    background-color: var(--color-gray-1);
    color: var(--color-gray-8);
    text-align: center;
}
.footer__wrapper {
    margin: 0 auto;
    padding: var(--spacing-1) var(--spacing-1);
}

.footer__links {
    align-items: center;
    display: flex;
    font-size: var(--font-size-medium);
    justify-content: center;
    list-style: none;
    margin: 0;
    margin-top: var(--spacing-1);
    padding: 0;
}
.footer__item {
    padding: 0 var(--spacing-n1);
}
.footer__icon {
    color: var(--color-cta-lighter);
    display: inline-block;
    padding: 0 var(--spacing-n5);
}
.footer__link {
    color: var(--color-gray-8);
}
.footer__link:hover {
    box-shadow: 0 calc(var(--spacing-n5) / 2) 0 0 var(--color-gray-5);
    color: var(--color-gray-5);
}
.footer__content-link {
    color: var(--color-gray-8);
    text-decoration: underline;
}
*,
:after,
:before {
    box-sizing: inherit;
}
html {
    box-sizing: border-box;
}
html,
body {
    overflow-x: hidden;
}
.main {
    margin: 0 auto;
    padding: 0 1.5rem;
    padding: 0 var(--spacing-1);
}

body {
    transition: background-color 0.3s ease;
}
.theme--dark {
    background-color: #363636;
    background-color: var(--color-gray-2);
}
select {
    border-width: 0;
    padding: 0.375rem 1.5rem;
    padding: var(--spacing-n3) var(--spacing-1);
    transition: box-shadow 0.3s ease, background-color 0.3s ease,
        color 0.3s ease;
}
.theme--light select {
    background-color: #fff;
    background-color: var(--color-gray-8);
    box-shadow: 0 0.125rem #ccc;
    box-shadow: 0 calc(var(--spacing-n5) / 2) 0 0 var(--color-gray-5);
}
.theme--light select:focus {
    box-shadow: 0 0.125rem #202020;
    box-shadow: 0 calc(var(--spacing-n5) / 2) 0 0 var(--color-gray-1);
    outline: 0;
}
.theme--dark select {
    background-color: #363636;
    background-color: var(--color-gray-2);
    box-shadow: 0 0.125rem #888;
    box-shadow: 0 calc(var(--spacing-n5) / 2) 0 0 var(--color-gray-4);
    color: #ccc;
    color: var(--color-gray-5);
}
.theme--dark select:focus {
    box-shadow: 0 0.125rem #f0f0f0;
    box-shadow: 0 calc(var(--spacing-n5) / 2) 0 0 var(--color-gray-7);
    outline: 0;
}
.skeleton {
    color: transparent;
    width: 100%;
}
.theme--light .skeleton {
    background-color: #ddd;
    background-color: var(--color-gray-6);
}
.theme--dark .skeleton {
    background-color: #888;
    background-color: var(--color-gray-4);
}
.skeleton:after {
    content: "Loading...";
    min-height: 100%;
}
html {
    font-size: 1rem;
    font-size: calc(var(--typography-fontSize) * 1rem);
    line-height: 1.5;
    line-height: var(--typography-lineHeight);
}
body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    color: #202020;
    color: var(--color-gray-1);
    font-family: Titillium Web, Arial, sans-serif;
    font-family: var(--font-family-secondary);
    font-size: 1rem;
    font-size: var(--font-size-base);
    font-weight: 600;
    font-weight: var(--font-weight-semibold);
}
h1,
h2,
h3 {
    font-family: Germania One, Arial sans-serif;
    font-family: var(--font-family-primary);
    font-weight: 400;
    font-weight: var(--font-weight-normal);
    margin: 0;
}
h1 {
    font-size: 1.333rem;
    font-size: var(--font-size-medium);
    line-height: 1;
}

.pagination {
    display: flex;
    justify-content: flex-end;
    list-style: none;
    margin: 0;
    min-width: 315px;
    padding: 0;
}

.pagination__link {
    padding: 0 var(--spacing-n4);
    text-decoration: none;
    transition: color 0.3s ease, box-shadow 0.3s ease;
}
.pagination__link:not([href]) {
    cursor: not-allowed;
    opacity: 0.25;
}
.theme--light .pagination__link {
    color: var(--color-gray-1);
}
.theme--dark .pagination__link {
    color: var(--color-gray-5);
}
.theme--light .pagination__link[href]:not(.pagination__link--current):hover {
    box-shadow: 0 calc(var(--spacing-n5) / 2) 0 0 var(--color-gray-5);
}
.theme--light .pagination__link--current {
    box-shadow: 0 calc(var(--spacing-n5) / 2) 0 0 var(--color-gray-1);
}
.theme--dark .pagination__link[href]:not(.pagination__link--current):hover {
    box-shadow: 0 calc(var(--spacing-n5) / 2) 0 0 var(--color-gray-4);
}
.theme--dark .pagination__link--current {
    box-shadow: 0 calc(var(--spacing-n5) / 2) 0 0 var(--color-gray-7);
}
.theme--light .pagination--loading {
    background-color: var(--color-gray-7);
}
.theme--dark .pagination--loading {
    background-color: var(--color-gray-4);
}
.pagination--loading,
.pagination--loading:hover {
    box-shadow: 0 0 0 0 transparent !important;
    color: transparent !important;
    pointer-events: none !important;
}
.showing {
    color: var(--color-gray-1);
    transition: color 0.3s ease;
}
@media (max-width: 64rem) {
    .showing {
        display: none;
    }
}
.theme--dark .showing {
    color: var(--color-gray-4);
}
.theme--dark .showing strong {
    color: var(--color-gray-5);
}
.theme--light .showing--loading {
    background-color: var(--color-gray-7);
}
.theme--dark .showing--loading {
    background-color: var(--color-gray-4);
}
.showing--loading,
.showing--loading {
    color: transparent !important;
}
.controls {
    align-items: center;
    justify-content: space-between;
    margin: var(--spacing-1) 0;
}

.controls > div {
    margin-bottom: var(--spacing-1);
}
@media (max-width: 64rem) {
    .controls > div {
        display: flex;
        justify-content: space-between;
    }
}

@media (max-width: 64rem) {
    .controls > .pagination {
        justify-content: center;
    }
}

.card--clicked img {
    opacity: 0.2;
    z-index: 0;
}
.card__figure {
    display: flex;
    flex-direction: column;
    height: 100%;
    margin: 0;
    transition: background-color 0.3s ease;
}
.theme--light .card__link {
    background-color: var(--color-gray-7);
}
.theme--dark .card__link {
    background-color: var(--color-gray-3);
}
.card__link {
    height: 100%;
}

.card__figure img {
    aspect-ratio: 1/1;
    max-width: none;
    object-fit: cover;
    object-position: top center;
    position: relative;
    width: 100%;
    z-index: 2;
}
.card__content {
    background-size: var(--spacing-n2) var(--spacing-n2);
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    justify-content: center;
    padding: var(--spacing-1) var(--spacing-n2);
    height: 100%;
}
.theme--light .card__content {
    background-image: var(--color-pattern-light);
}
.theme--dark .card__content {
    background-image: var(--color-pattern-dark);
}
a,
a:visited {
    color: var(--color-gray-1);
    display: block;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    position: relative;
    text-decoration: none;
}
.theme--light a,
.theme--light a:visited {
    color: var(--color-gray-1);
}
.theme--dark a,
.theme--dark a:visited {
    color: var(--color-gray-6);
}
.card {
    text-align: center;
    transition: border-color 0.3s ease;
}
.theme--light .card {
    border: var(--spacing-n1) double var(--color-gray-1);
}
.theme--dark .card {
    border: var(--spacing-n1) double var(--color-gray-5);
}
.theme--light .card:hover {
    box-shadow: 0 0 var(--spacing-n3) calc(var(--spacing-n5) / 3)
        var(--color-gray-3);
}
.theme--dark .card:hover {
    box-shadow: 0 0 var(--spacing-n3) calc(var(--spacing-n5) / 3)
        var(--color-gray-4);
}
h2 {
    font-size: var(--font-size-large);
    line-height: 1.1;
    margin-bottom: var(--spacing-n2);
}
h3 {
    font-size: var(--font-size-medium);
    margin-bottom: var(--spacing-n3);
}
.card__banner {
    background-color: var(--color-cta-darker);
    color: var(--color-gray-8);
    display: block;
    font-size: var(--font-size-small);
    padding: var(--spacing-n3) var(--spacing-2);
    position: absolute;
    right: 0;
    top: 0;
    transform: rotate(45deg) translate(30%, -25%);
    white-space: nowrap;
    z-index: 2;
}
.card__spinner {
    align-items: center;
    -webkit-animation: svelte-1363ujp-spin 1s ease infinite;
    animation: svelte-1363ujp-spin 1s ease infinite;
    aspect-ratio: 1/1;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    display: flex;
    font-size: var(--font-size-xxlarge);
    justify-content: center;
    position: absolute;
    transform: translateZ(0);
    width: 100%;
    z-index: 1;
}
@-webkit-keyframes svelte-1363ujp-spin {
    0% {
        transform: rotate(0);
    }
    to {
        transform: rotate(359deg);
    }
}
@keyframes svelte-1363ujp-spin {
    0% {
        transform: rotate(0);
    }
    to {
        transform: rotate(359deg);
    }
}
.album-list {
    grid-gap: var(--spacing-2) var(--spacing-1);
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    list-style: none;
    margin: 0;
    padding: 0;
    text-align: center;
}

.switcher__button {
    background: transparent;
    border-width: 0;
    color: var(--color-gray-8);
    cursor: pointer;
    height: 100%;
    line-height: 1;
    padding: 0;
    position: relative;
}

.switcher__wrapper {
    display: flex;
}
.switcher__icon {
    position: relative;
    width: calc(var(--spacing-1) + var(--spacing-n2));
    z-index: 1;
}

.switcher__indicator {
    background: var(--color-gray-3);
    display: block;
    height: 100%;
    left: 0;
    position: absolute;
    top: 50%;
    transition: transform 0.3s ease;
    width: 50%;
    z-index: 0;
}
.switcher__indicator--dark {
    transform: translateY(-50%);
}
.switcher__indicator--light {
    transform: translate(100%, -50%);
}
.header {
    background-color: var(--color-gray-1);
    color: var(--color-gray-8);
    display: flex;
    justify-content: space-between;
    padding: var(--spacing-n2) var(--spacing-1);
}

.header__link {
    color: var(--color-gray-7);
    display: inline-block;
    text-decoration: none;
}

.backlink {
    align-items: center;
    aspect-ratio: 1/1;
    bottom: var(--spacing-2);
    display: flex;
    height: var(--spacing-2);
    justify-content: center;
    left: var(--spacing-1);
    line-height: 1;
    position: fixed;
    text-decoration: none;
    transform: rotate(-45deg);
    transition: background-color 0.3s ease, color 0.3s ease,
        border-color 0.3s ease;
    width: var(--spacing-2);
    z-index: 2;
}

.theme--light .backlink,
.theme--light .backlink:visited {
    background-color: var(--color-gray-7);
    border: var(--spacing-n2) double var(--color-gray-1);
    color: var(--color-gray-1);
}
.theme--dark .backlink,
.theme--dark .backlink:visited {
    background-color: var(--color-gray-2);
    border: var(--spacing-n2) double var(--color-gray-4);
    color: var(--color-gray-7);
}
.theme--light .backlink:active,
.theme--light .backlink:hover {
    box-shadow: 0 0 var(--spacing-n3) calc(var(--spacing-n5) / 3)
        var(--color-gray-3);
}
.theme--dark .backlink:active,
.theme--dark .backlink:hover {
    box-shadow: 0 0 var(--spacing-n3) calc(var(--spacing-n5) / 3)
        var(--color-gray-4);
}
.backlink__icon {
    transform: rotate(45deg);
}
.album__details {
    grid-gap: var(--spacing-n2) 0;
    display: grid;
}

.album__details > * {
    margin: 0;
}
.album__details > dt {
    font-weight: var(--font-weight-bold);
}

.album__details > dd {
    padding-bottom: var(--spacing-n3);
    word-break: break-word;
}
.theme--light .album__details > dd {
    border-bottom: calc(var(--spacing-n4) / 2) solid var(--color-gray-6);
}
.theme--dark .album__details > dd {
    border-bottom: calc(var(--spacing-n4) / 2) solid var(--color-gray-3);
}
.album__details {
    grid-gap: var(--spacing-n2) 0;
    display: grid;
}

.album__details > {
    margin: 0;
}
.album__details > dt {
    font-weight: var(--font-weight-bold);
    transition: border-color 0.3s ease;
}

.album__details > dd {
    padding-bottom: var(--spacing-n3);
    transition: border-color 0.3s ease;
    word-break: break-word;
}
.theme--light .album__details > dd {
    border-bottom: calc(var(--spacing-n4) / 2) solid var(--color-gray-6);
}
.theme--dark .album__details > dd {
    border-bottom: calc(var(--spacing-n4) / 2) solid var(--color-gray-3);
}
.album__tracklist > li:not(.album__tracklist-title) {
    grid-gap: var(--spacing-n1);
    align-items: baseline;
    display: grid;
    grid-template-columns: minmax(4ch, -webkit-max-content) auto minmax(
            50px,
            -webkit-max-content
        );
    grid-template-columns: minmax(4ch, max-content) auto minmax(
            50px,
            max-content
        );
    margin-top: var(--spacing-n3);
    padding-bottom: var(--spacing-n3);
    transition: border-color 0.3s ease;
}
.theme--light .album__tracklist > li:not(.album__tracklist-title) {
    border-bottom: calc(var(--spacing-n4) / 2) solid var(--color-gray-6);
}
.theme--dark .album__tracklist > li:not(.album__tracklist-title) {
    border-bottom: calc(var(--spacing-n4) / 2) solid var(--color-gray-3);
}
.album__tracklist-duration {
    font-size: var(--font-size-small);
    text-align: right;
    transition: color 0.3s ease;
}
.theme--light .album__tracklist-duration {
    color: var(--color-gray-3);
}
.theme--dark .album__tracklist-duration {
    color: var(--color-gray-4);
}
.album__tracklist-title {
    font-family: var(--font-family-primary);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-normal);
    margin: var(--spacing-n1) 0;
}
.album__wrapper {
    max-width: var(--container-medium);
}
.album__list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.album__video-frame {
    aspect-ratio: 16/9;
    border: 0;
    display: block;
    width: 100%;
}
.theme--light .album__video-frame {
    background-color: var(--color-gray-7);
}
.theme--dark .album__video-frame {
    background-color: var(--color-gray-4);
}
.album__section {
    margin: 0;
    padding: var(--spacing-3) var(--spacing-1);
    transition: color 0.3s ease;
}
.album__section > dt {
    font-family: var(--font-family-primary);
    font-size: var(--font-size-medium);
    font-weight: var(--font-weight-normal);
    transition: color 0.3s ease;
}
.theme--light .album__section > dt {
    color: var(--color-cta);
}
.theme--dark .album__section > dt {
    color: var(--color-cta-lighter);
}
.theme--dark .album__section {
    color: var(--color-gray-5);
}
.album__section > dd {
    font-size: var(--font-size-medium);
    margin: 0;
}
.album__section--long {
    max-width: var(--container-large);
}
.album__section--long > dd {
    font-size: var(--font-size-base);
    word-break: break-word;
}
.album__section > dd + dt {
    margin-top: var(--spacing-1);
}
img {
    display: block;
    height: auto;
    max-width: 100%;
}
.gallery {
    position: relative;
    text-align: center;
}
.gallery__controls {
    aspect-ratio: 1;
    background-color: var(--color-gray-1);
    color: var(--color-gray-7);
    display: flex;
    flex-wrap: wrap;
    position: absolute;
    right: 0;
    width: var(--spacing-3);
}
.gallery__button {
    inline-display: block;
    aspect-ratio: 1;
    background-color: var(--color-gray-7);
    border-width: 0;
    cursor: pointer;
    flex-basis: 50%;
    margin: 0;
    padding: 0;
}
.gallery__button:active,
.gallery__button:hover {
    background-color: var(--color-gray-5);
}
.gallery__status {
    flex-basis: 100%;
    padding: var(--spacing-n5) 0;
}
figure {
    margin: 0;
}
.album__summary {
    background-size: var(--spacing-n2) var(--spacing-n2);
}

.theme--light .album__summary {
    background-image: var(--color-pattern-light);
}
.theme--dark .album__summary {
    background-image: var(--color-pattern-dark);
    color: var(--color-gray-7);
}
.album__list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.album__section {
    margin: 0;
    padding: var(--spacing-4) var(--spacing-1) var(--spacing-2);
}
.album__section > dt {
    font-family: var(--font-family-primary);
    font-size: var(--font-size-medium);
    font-weight: var(--font-weight-normal);
    transition: color 0.3s ease;
}
.theme--light .album__section > dt {
    color: var(--color-cta);
}
.theme--dark .album__section > dt {
    color: var(--color-cta-lighter);
}
.album__section > dd {
    font-size: var(--font-size-medium);
    margin: 0;
}
.album__section > dd + dt {
    margin-top: var(--spacing-1);
}
.album {
    grid-gap: 0;
    display: grid;
}

.album img {
    aspect-ratio: 1/1;
    max-width: none;
    object-fit: cover;
    object-position: top center;
    width: 100%;
}

#svelte-announcer {
    clip: rect(0 0 0 0);
    -webkit-clip-path: inset(50%);
    clip-path: inset(50%);
    height: 1px;
    left: 0;
    overflow: hidden;
    position: absolute;
    top: 0;
    white-space: nowrap;
    width: 1px;
}


html {
    line-height: 1.15;
    -webkit-text-size-adjust: 100%;
    max-width: 600px;
    margin: 0 auto;
    padding: 2rem;
    /*  overflow: hidden;*/
    /* max-height: 100vh; */
}
body {
    margin: 0;
}
main {
    display: block;
}
h1 {
    font-size: 2em;
    margin: 0.67em 0;
}
hr {
    box-sizing: content-box;
    height: 0;
    overflow: visible;
}
pre {
    font-family: monospace, monospace;
    font-size: 1em;
}
a {
    background-color: transparent;
}
abbr[title] {
    border-bottom: none;
    text-decoration: underline;
    text-decoration: underline dotted;
}
b,
strong {
    font-weight: bolder;
}
code,
kbd,
samp {
    font-family: monospace, monospace;
    font-size: 1em;
}
small {
    font-size: 80%;
}
sub,
sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
}
sub {
    bottom: -0.25em;
}
sup {
    top: -0.5em;
}
img {
    border-style: none;
}
button,
input,
optgroup,
select,
textarea {
    font-family: inherit;
    font-size: 100%;
    line-height: 1.15;
    margin: 0;
}
button,
input {
    overflow: visible;
}
button,
select {
    text-transform: none;
}
[type="button"],
[type="reset"],
[type="submit"],
button {
    -webkit-appearance: button;
}
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner,
button::-moz-focus-inner {
    border-style: none;
    padding: 0;
}
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring,
button:-moz-focusring {
    outline: 1px dotted ButtonText;
}
fieldset {
    padding: 0.35em 0.75em 0.625em;
}
legend {
    box-sizing: border-box;
    color: inherit;
    display: table;
    max-width: 100%;
    padding: 0;
    white-space: normal;
}
progress {
    vertical-align: baseline;
}
textarea {
    overflow: auto;
}
[type="checkbox"],
[type="radio"] {
    box-sizing: border-box;
    padding: 0;
}
[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
    height: auto;
}
[type="search"] {
    -webkit-appearance: textfield;
    outline-offset: -2px;
}
[type="search"]::-webkit-search-decoration {
    -webkit-appearance: none;
}
::-webkit-file-upload-button {
    -webkit-appearance: button;
    font: inherit;
}
details {
    display: block;
}
summary {
    display: list-item;
}
template {
    display: none;
}
[hidden] {
    display: none;
}

:root {
    --font-family-primary: Germania One, Arial sans-serif;
    --font-family-secondary: Titillium Web, Arial, sans-serif;
    --typography-lineHeight: 1.5;
    --typography-fontSize-px: 16;
    --typography-scale: 1.333;
    --font-weight-normal: 400;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --typography-fontSize: calc(var(--typography-fontSize-px) / 16);
    --typography-scale-1: var(--typography-scale);
    --typography-scale-2: calc(
        var(--typography-scale-1) * var(--typography-scale)
    );
    --typography-scale-3: calc(
        var(--typography-scale-2) * var(--typography-scale)
    );
    --typography-scale-4: calc(
        var(--typography-scale-3) * var(--typography-scale)
    );
    --typography-scale-5: calc(
        var(--typography-scale-4) * var(--typography-scale)
    );
    --typography-scale-6: calc(
        var(--typography-scale-5) * var(--typography-scale)
    );
    --font-size-smallest: calc(1 / var(--typography-scale-3) * 1rem);
    --font-size-smaller: calc(1 / var(--typography-scale-2) * 1rem);
    --font-size-small: calc(1 / var(--typography-scale-1) * 1rem);
    --font-size-base: 1rem;
    --font-size-medium: calc(var(--typography-scale-1) * 1rem);
    --font-size-larger: calc(var(--typography-scale-2) * 1rem);
    --font-size-large: calc(var(--typography-scale-3) * 1rem);
    --font-size-xlarge: calc(var(--typography-scale-4) * 1rem);
    --font-size-xxlarge: calc(var(--typography-scale-5) * 1rem);
    --font-size-xxxlarge: calc(var(--typography-scale-6) * 1rem);
    --rhythmUnit: calc(var(--typography-lineHeight) * 1rem);
    --spacing-n5: calc(var(--rhythmUnit) / 6);
    --spacing-n4: calc(var(--rhythmUnit) / 5);
    --spacing-n3: calc(var(--rhythmUnit) / 4);
    --spacing-n2: calc(var(--rhythmUnit) / 3);
    --spacing-n1: calc(var(--rhythmUnit) / 2);
    --spacing-1: var(--rhythmUnit);
    --spacing-2: calc(var(--rhythmUnit) * 2);
    --spacing-3: calc(var(--rhythmUnit) * 3);
    --spacing-4: calc(var(--rhythmUnit) * 4);
    --spacing-5: calc(var(--rhythmUnit) * 5);
    --spacing-6: calc(var(--rhythmUnit) * 6);
    --spacing-7: calc(var(--rhythmUnit) * 7);
    --spacing-8: calc(var(--rhythmUnit) * 8);
    --spacing-9: calc(var(--rhythmUnit) * 9);
    --spacing-10: calc(var(--rhythmUnit) * 10);
    --color-gray-1: #202020;
    --color-gray-2: #363636;
    --color-gray-3: #555;
    --color-gray-4: #888;
    --color-gray-5: #ccc;
    --color-gray-6: #ddd;
    --color-gray-7: #f0f0f0;
    --color-gray-8: #fff;
    --color-cta: #b81d18;
    --color-cta-darker: #951813;
    --color-cta-lighter: #f54842;
    --color-pattern-light: linear-gradient(
        -45deg,
        var(--color-gray-7) 25%,
        var(--color-gray-8) 0,
        var(--color-gray-8) 50%,
        var(--color-gray-7) 0,
        var(--color-gray-7) 75%,
        var(--color-gray-8) 0,
        var(--color-gray-8)
    );
    --color-pattern-dark: linear-gradient(
        -45deg,
        var(--color-gray-1) 25%,
        var(--color-gray-2) 0,
        var(--color-gray-2) 50%,
        var(--color-gray-1) 0,
        var(--color-gray-1) 75%,
        var(--color-gray-2) 0,
        var(--color-gray-2)
    );
    --container-wide: 1440px;
    --container-large: 968px;
    --container-medium: 720px;
    --container-small: 360px;
}

              
            
!

JS

              
                const images = [
  "https://res.cloudinary.com/adrianbece/image/fetch/f_auto/https://i.discogs.com/0WMXqWHEYWikcm64MZHfgZrdxwilrgWT6W7YSNfp2Jw/rs:fit/g:sm/q:90/h:544/w:600/czM6Ly9kaXNjb2dz/LWRhdGFiYXNlLWlt/YWdlcy9SLTQyMDEz/ODUtMTQ3Njk1NTM1/My01OTY0LmpwZWc.jpeg",
  "https://res.cloudinary.com/adrianbece/image/fetch/f_auto/https://i.discogs.com/__om3oX_mda3cWMK1NS1X-PS3WlZm5i0Mn_tQmYQHZs/rs:fit/g:sm/q:90/h:495/w:600/czM6Ly9kaXNjb2dz/LWRhdGFiYXNlLWlt/YWdlcy9SLTQyMDEz/ODUtMTQ3Njk1NTM5/MS05ODkwLmpwZWc.jpeg",
  "https://res.cloudinary.com/adrianbece/image/fetch/f_auto/https://i.discogs.com/u8LhtsKuJ2y7Qr2nrq6Lym9wNFjb8hr6Sipghb_NrW8/rs:fit/g:sm/q:90/h:602/w:600/czM6Ly9kaXNjb2dz/LWRhdGFiYXNlLWlt/YWdlcy9SLTQyMDEz/ODUtMTQ3Njk1NTMw/Mi0xMTYxLmpwZWc.jpeg",
  "https://res.cloudinary.com/adrianbece/image/fetch/f_auto/https://i.discogs.com/OHZ4TbgJepOTUD8fCMMJ1PjuBd91vxBY3UXQ5U-GIy0/rs:fit/g:sm/q:90/h:597/w:600/czM6Ly9kaXNjb2dz/LWRhdGFiYXNlLWlt/YWdlcy9SLTQyMDEz/ODUtMTQ3Njk1NTc0/MS02MTgzLmpwZWc.jpeg",
  "https://res.cloudinary.com/adrianbece/image/fetch/f_auto/https://i.discogs.com/ieJ_ycJevDYCjtfRv6waTGlGBZNff23bSpCYDjCxRJY/rs:fit/g:sm/q:90/h:599/w:600/czM6Ly9kaXNjb2dz/LWRhdGFiYXNlLWlt/YWdlcy9SLTQyMDEz/ODUtMTQ3Njk1NTU1/Ny01NjU4LmpwZWc.jpeg",
  "https://res.cloudinary.com/adrianbece/image/fetch/f_auto/https://i.discogs.com/L_2NB8lhIQatZXgJHeXbpuc4zboElMmqaJxrRVGuZkQ/rs:fit/g:sm/q:90/h:596/w:600/czM6Ly9kaXNjb2dz/LWRhdGFiYXNlLWlt/YWdlcy9SLTQyMDEz/ODUtMTQ3Njk1NTkz/OS01MDYyLmpwZWc.jpeg",
  "https://res.cloudinary.com/adrianbece/image/fetch/f_auto/https://i.discogs.com/DScqM578Vp1D-vJpZLIi-jKNj3Loj6dheT4R3T8iTd0/rs:fit/g:sm/q:90/h:600/w:600/czM6Ly9kaXNjb2dz/LWRhdGFiYXNlLWlt/YWdlcy9SLTQyMDEz/ODUtMTQ3Njk1NjA2/Ny01MTM1LmpwZWc.jpeg",
  "https://res.cloudinary.com/adrianbece/image/fetch/f_auto/https://i.discogs.com/RgkMnSDbZSUMMD2NTcK_Xsr02FD128dTMhpTfsuVz_g/rs:fit/g:sm/q:90/h:633/w:600/czM6Ly9kaXNjb2dz/LWRhdGFiYXNlLWlt/YWdlcy9SLTQyMDEz/ODUtMTQ3Njk1NTkx/OC0yNjYyLmpwZWc.jpeg",
  "https://res.cloudinary.com/adrianbece/image/fetch/f_auto/https://i.discogs.com/TeIMBMZXz-t6sYo-tdll1Xw0lFGaPVFrQa_JyhBcJ4o/rs:fit/g:sm/q:90/h:568/w:600/czM6Ly9kaXNjb2dz/LWRhdGFiYXNlLWlt/YWdlcy9SLTQyMDEz/ODUtMTQ3Njk1NTg1/My0xMTQ3LmpwZWc.jpeg",
  "https://res.cloudinary.com/adrianbece/image/fetch/f_auto/https://i.discogs.com/idYcppRK9HImb2F8FBfd9JxK_7ie-Rh7wWSE4RyRKW4/rs:fit/g:sm/q:90/h:607/w:600/czM6Ly9kaXNjb2dz/LWRhdGFiYXNlLWlt/YWdlcy9SLTQyMDEz/ODUtMTQ3Njk1NTcx/MC0xNTQ0LmpwZWc.jpeg",
  "https://res.cloudinary.com/adrianbece/image/fetch/f_auto/https://i.discogs.com/JA20qgc3RrgOTlWGwbOCUNsJ2XkT3QyrfajM-Iyu2jQ/rs:fit/g:sm/q:90/h:605/w:600/czM6Ly9kaXNjb2dz/LWRhdGFiYXNlLWlt/YWdlcy9SLTQyMDEz/ODUtMTQ3Njk1NTk0/MS01NzcyLmpwZWc.jpeg"
];

let index = 0;

function previousImage() {
  index -= 1;

  if (index < 0) {
    index = images.length - 1;
  }

  updateIndex();
  crossfadeElements();
}

function nextImage() {
  index += 1;

  if (index >= images.length) {
    index = 0;
  }

  updateIndex();
  crossfadeElements();
}

async function crossfadeElements() {
  if (document.createDocumentTransition) {
    const imageTransition = document.createDocumentTransition();
    await imageTransition.start(updateImage);
  } else {
    updateImage();
  }
}

function updateIndex() {
  const galleryIndex = document.getElementById("js-gallery-index");
  galleryIndex.textContent = index + 1;
}

function updateImage() {
  const gallery = document.getElementById("js-gallery");
  gallery.src = images[index];
}

              
            
!
999px

Console