.action-button-grid {
  width: 100%;
  height: 100%;

  display: flex;
  flex-direction: column;

  background-color: transparent;
  padding-top: 4px;
  box-sizing: border-box;
  
  &__container {
    display: grid;
    grid-template-columns: 3fr 1fr; /* Left column takes 3/4, right column takes 1/4 for first two rows */
    grid-template-rows: 1.5fr 1.5fr 0.2fr 1.5fr; /* First two rows larger, separator row, bottom row same as top rows */
    gap: 12px;
    width: 100%;
    height: 100%;
    position: relative;
  }
  
  &__item {
    width: 100%;
    height: 100%;
    min-width: 0;
    transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
    transform-origin: center;
    
    /* First two rows: embed and open-tab buttons */
    &:nth-child(1), &:nth-child(3) {
      grid-column: 1; /* Left column (3/4 width) */
    }
    
    &:nth-child(2), &:nth-child(4) {
      grid-column: 2; /* Right column (1/4 width) */
    }
  }
  
  /* Separator styling */
  &__separator {
    grid-column: 1 / span 2; /* Span across both columns */
    height: 1px;
    margin: 0;
    background-color: rgba(255, 255, 255, 0.2);
    align-self: center;
  }
  
  /* Bottom row container */
  &__bottom-row {
    grid-column: 1 / span 2; /* Span across both columns */
    grid-row: 4; /* Position in the fourth row */
    display: flex;
    gap: 12px;
    width: 100%;
    height: 100%;
  }
  
  /* Bottom row items (equal width) */
  &__bottom-item {
    flex: 1; /* Equal width for both items */
    height: 100%;
    min-width: 0;
    transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
    transform-origin: center;
  }
}
