.upz-block-account-actions {
  width:100%;
  .upz-block-account-actions-grid {
     display: grid;
     grid-template-columns: repeat(auto-fill, 260px);
     width: 100%;
     justify-content: center;
     align-content: center;
     gap: 1.5rem;
     margin-top: 5rem;
     @media (max-width: 1024px) {
       grid-template-columns: repeat(2, 1fr);
     }
     @media (max-width: 640px) {
       grid-template-columns: 1fr;
     }
     .upz_action {
       flex-direction: column;
       text-align: center;
       align-items: center;
       justify-content: center;
       min-height: 200px;
     }
  }
  .upz-block-account-actions-list {
    .upz_action {
      .action-content {
        flex-grow: 1;
      }
      .action-arrow {
        align-self: center;
      }
    }
  }
  .upz_action {
    position: relative;
    display: flex;
    min-width: 260px;
    gap: 1.5rem;
    margin-bottom: 1.5rem;
    padding: 1.5rem;
    cursor: pointer;
    transition: background-color 0.3s;
    &.disabled {
      cursor: default;
    }
    &.upz-drop-shadow-none {
      box-shadow: none;
    }
    &.upz-border-radius-none {
      border-radius: 0;
    }
    &.upz-border-radius-small {
      border-radius: 0.4rem;
    }
    &.upz-border-radius-medium {
      border-radius: 0.7rem;
    }
    &.upz-border-radius-large {
      border-radius: 1rem;
    }
    i.action-icon {
      font-size: 4rem;
      display: block;
      width: 4rem;
      height: 4rem;
    }
    .action-custom-icon-image {
      width: 4rem;
      height: 4rem;
      position: relative;
      img {
        display: block;
        vertical-align: middle;
        width: 100%;
        border-radius: 8px;
        object-fit: cover;
        aspect-ratio: 1 / 1;
        max-width: 100%;
        height: auto;
      // img elements only have ::before elements when the image fails to load
      // so this is the fallback styling, it pushes the browsers broken image icon out of view
      &::before {
        content: "";
        height: 100%;
        display: block;
      }
      }
    }
    .action-content {
      h3 {
        font-size: 21px;
        margin-bottom: 0.5rem;
        margin-top: 0;
        width: 100%;
        overflow: hidden;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        display: -webkit-box;
      }
      p {
        font-size: 15px;
        margin: 0;
      }
    }
    i.action-arrow {
      font-size: 30px;
    }
    .upz-loading {
      position: absolute;
      top: 6px;
      right: 6px;
      width: 50px;
      transform: scale(0.5);
      padding: 8px;
      aspect-ratio: 1;
      border-radius: 50%;
      background: #25b09b;
      --_m:
        conic-gradient(#0000 10%,#000),
        linear-gradient(#000 0 0) content-box;
      -webkit-mask: var(--_m);
      mask: var(--_m);
      -webkit-mask-composite: source-out;
      mask-composite: subtract;
      animation: l3 1s infinite linear;
      transform: scale(0.5);
    }
  }
}

@keyframes l3 {to{transform:scale(0.5) rotate(1turn)}}