@layer shwt-widgets {
  shwt-widget-grid {
    display: flex;
    height: inherit;
    overflow: hidden;
    width: inherit;
  }

  .grid {
    --_column-count: var(--column-count, 2);
    --_grid-padding: var(--grid-padding, 0);
    --_border: var(--image-border, none);
    --_border-radius: var(--image-border-radius, 0);
    --_row-count: var(--row-count, 1);

    flex: 1;

    &.column-orientation {
      padding: calc(var(--_grid-padding) * var(--tr-ratio));
      column-gap: calc(var(--_grid-padding) * var(--tr-ratio));

      grid-template-columns: repeat(var(--_column-count, 1), minmax(0, 1fr));
      grid-template-rows: 1fr;
    }

    &.row-orientation {
      padding: 0;
      max-height: 100%;

      --row-pad: calc((var(--_row-count) - 1) * var(--_grid-padding));
      --track-height: calc(((var(--height) - var(--row-pad)) / var(--_row-count)));
      column-gap: calc(var(--_grid-padding) * var(--tr-ratio));

      &.align-right {
        justify-content: end;
      }

      &.align-center {
        justify-content: center;
      }

      &.align-left,
      &.overflow {
        justify-content: start;
      }

      &.auto-gap {
        justify-content: space-between;
      }

      &.overflow {
        display: flex;

        &>* {
          aspect-ratio: 1;
        }
      }

      &.align-center,
      &.align-left,
      &.align-right,
      &.auto-gap {
        grid-template-rows: repeat(var(--_row-count), 1fr);
        row-gap: calc(var(--_grid-padding) * var(--tr-ratio));
        grid-template-columns: repeat(auto-fit, calc(var(--track-height) * var(--tr-ratio)));
      }

      & img {
        aspect-ratio: 1 / 1;
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
    }

    display: grid;

    & .column {
      align-self: start;
      display: flex;
      flex-direction: column;
      row-gap: calc(var(--_grid-padding) * var(--tr-ratio));

      &.level {
        height: 100%;
        justify-content: stretch;

        & img:last-of-type {
          aspect-ratio: unset !important;
          height: -webkit-fill-available;
        }
      }

      & img {
        object-fit: cover;
        transition-duration: 0.4s;
        transition-property: opacity;
        opacity: 1;
        border: var(--_border);
        border-radius: var(--_border-radius);
      }

      & img.shwt-loading {
        opacity: 0;
      }
    }
  }
}