.creations {

  ul.creation-list {
    padding: 0;
    margin: 0;
    display: grid;
    /*grid-template-columns: 1fr 1fr 1fr;*/
    grid-template-columns: repeat(2, minmax(0, 1fr));
    /*grid-auto-rows: 1fr;*/
    /*grid-auto-columns: minmax(0, 1fr);*/
    /*grid-auto-flow: column;*/
    /*grid-column-gap: 3em;*/
    gap: 3em;

    list-style: none;

    color: var(--color);

    >li {
      display: flex;
      flex-direction: column;

      padding-block: 1em;
      gap: 1em;

      color: var(--color);
      background-color: var(--background-color-contrast-1);

      /*border: 1px solid black;*/
      /*border-radius: .5em;*/

      >header {
        font-family: var(--font-prose);
        padding-inline: 1em;

        x-title {
          display: block;
          font-size: 1.75em;
          /*font-weight: 400;*/
          font-weight: 800;
          text-decoration-line: underline;
          text-decoration-thickness: 1.5px;
          text-decoration-style: solid;
          text-underline-offset: 0.15em;
        }

        x-subtitle {
          display: block;
          font-size: 1.25em;
          line-height: .7;
          /*font-weight: 400;*/
        }
      }

      x-short {
        display: block;
        padding-inline: 1em;
        /*margin-block: .5em;*/
      }

      nav {
        padding-inline: 1em;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        gap: .5em;
        margin-block-start: auto;
        color: var(--main-font-color-highlight-dark);

        span {
          opacity: .8;
        }
      }

      video {
        max-width: 100%;
        /*border-radius: 5px;*/
        aspect-ratio: 16 / 9;
        object-fit: cover;
      }

      img {
        aspect-ratio: 16 / 9;
        object-fit: cover;
        max-width: 100%;
        /*border-radius: 5px;*/
      }

      x-text-logo {
        aspect-ratio: 16 / 9;
        object-fit: cover;
        max-width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 6em;
        font-weight: bold;
        /* background-color: var(--background-color); */
        background-color: black;
        font-family: var(--font-prose) sans-serif;
      }
    }
  }
}

@media (width < 900px) {
  .creations {
    padding-inline: 0;

    ul.creation-list {
      /*grid-template-columns: repeat(1, minmax(0, 1fr));*/
      grid-template-columns: 1fr;
      /*display: block;*/

      li {
        /*border-radius: 0;*/
      }
    }
  }
}

/*@media (900px <= width < 1200px) {*/
@media (900px <= width) {
  .creations {
    /*padding-inline: 0;*/

    ul.creation-list {
      grid-template-columns: repeat(2, minmax(0, 1fr));

      li {
        /*border-radius: 0;*/
        border-radius: .5em;
      }
    }
  }
}


/*@media (1200px <= width) {*/
/*  .creations {*/
/*    !*padding-inline: min(10rem, var(--letterboxed-width));*!*/
/*    !*padding-inline: min(10rem, var(--letterboxed));*!*/
/*  }*/

/*  li {*/
/*    border-radius: .5em;*/
/*  }*/
/*}*/