/* --_co-gallery-item-height: calc(var(--op-size-unit) * 32); 128px; */

.gallery {
  display: flex;
  flex-direction: column;
  gap: var(--op-space-large);

  .btn-group {
    justify-content: end;
  }

  .gallery__items {
    --_co-gallery-item-radius: var(--op-radius-3x-large);

    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--op-space-large);
    inline-size: 100%;
    overflow: hidden;

    /* Gallery Item */

    .gallery__item {
      grid-column: 1 / -1;
      display: grid;
      grid-template-rows: 1fr auto;
      aspect-ratio: 1 / 1;
      background-color: var(--op-color-primary-plus-eight);
      color: var(--op-color-primary-on-plus-eight);
      box-shadow: var(--op-border-all) var(--op-color-primary-plus-seven);
      border-radius: var(--_co-gallery-item-radius);
      text-decoration: none;
    }

    .gallery__item-image {
      overflow: hidden;

      img {
        object-fit: cover;
        object-position: center;
        inline-size: 100%;
        block-size: 100%;
        border-start-start-radius: var(--_co-gallery-item-radius);
        border-start-end-radius: var(--_co-gallery-item-radius);
      }
    }

    .gallery__item-title {
      padding: var(--op-space-x-small);
      font-size: var(--op-font-small);
      font-weight: var(--op-font-weight-semi-bold);
      color: var(--op-color-primary-on-plus-max-alt);
      overflow: hidden;
      text-overflow: ellipsis;
    }

    /* Modifiers */

    &.gallery__items--grid {
      .gallery__item {
        grid-column: span 1;
      }
    }
  }
}