.actions {
  background-color: var(--Base-Surface-Subtle-Normal);
  border-radius: var(--Corner-radius-Medium);
  display: grid;
  grid-area: actions;
  padding: var(--Spacing-x1) var(--Spacing-x2);
}

@media screen and (max-width: 767px) {
  .actions {
    & > button[class*="btn"][class*="icon"][class*="small"] {
      border-bottom: 1px solid var(--Base-Border-Subtle);
      border-radius: 0;
      justify-content: space-between;

      &:last-of-type {
        border-bottom: none;
      }

      & > svg {
        order: 2;
      }
    }
  }
}

@media screen and (min-width: 768px) {
  .actions {
    gap: var(--Spacing-x1);
    grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr;
    justify-content: center;
    padding: var(--Spacing-x1) var(--Spacing-x3);
  }
}