.section-bento-grid-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-4);

  @media (min-width: 768px) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  @media (min-width: 1200px) {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.section-bento-grid-item {
  inline-size: 100%;
  block-size: 100%;
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  padding: var(--layout-margin);
  background-color: var(--scheme-primary-button-background);
  color: var(--scheme-primary-button-text);
  position: relative;

  ::selection {
    background-color: var(--scheme-primary-button-text);
    color: var(--scheme-primary-button-background);
  }

  @media (min-width: 1200px) {
    aspect-ratio: var(--desktop-aspect-ratio);
    grid-column: min(var(--desktop-column), 3) / span min(var(--desktop-column-span), 2);
    grid-row: var(--desktop-row);
  }
}

.section-bento-grid-item-media {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  z-index: 0;

  > * {
    position: absolute;
    inset: 0;
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
  }

  &::after {
    content: '';
    position: absolute;
    inset: 0;
    inline-size: 100%;
    block-size: 100%;
    background-color: #000;
    opacity: 0.25;
  }
}

.section-bento-grid-item-text {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: var(--space-8);
  position: relative;
  z-index: 1;

  &:has(.section-bento-grid-item-icon) {
    inset-block-start: calc(-1 * var(--space-32));

    &:has(.text-display-alt-sm) {
      inset-block-start: calc(-1 * var(--space-28));
    }
  }

  .section-bento-grid-item-icon {
    min-inline-size: var(--space-80);
    min-block-size: var(--space-80);
    max-inline-size: var(--space-80);
    max-block-size: var(--space-80);
    inline-size: var(--space-80);
    block-size: var(--space-80);
    position: relative;

    img {
      position: absolute;
      inset: 0;
      inline-size: 100%;
      block-size: 100%;
      object-fit: contain;
      object-position: center;
    }
  }

  &.section-bento-grid-item-text--row {
    @media (min-width: 1200px) {
      flex-direction: row;

      .section-bento-grid-item-prefix {
        text-align: end;
      }

      .section-bento-grid-item-value {
        text-align: center;
      }

      .section-bento-grid-item-suffix {
        text-align: start;
      }
    }
  }
}

.section-bento-grid-item-link {
  z-index: 1;
  position: absolute;
  inset-block-end: var(--space-16);
  inset-inline-start: 50%;
  transform: translateX(-50%);

  @media (min-width: 768px) {
    inset-block-end: var(--space-32);
  }

  .text-button {
    color: var(--scheme-primary-button-text);
  }

  .button-container {
    justify-content: center;
  }
}