.icon-showcase {
    position: relative;
    width: 100%;
    max-width: 600px;
    margin: 128px auto;
    height: 600px;
  }

  .icon-showcase-circle {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: 4px solid var(--cor-prim-hgl);
    transform: translate(-50%, -50%);
    box-shadow: 0 0 0 20px rgba(var(--cor-prim-rgb), .1), 0 0 0 20px rgba(var(--cor-prim-rgb), .1) inset;
  }

  /* Versão com octógono */
  .icon-showcase.rect .icon-showcase-circle {
    border: 0;
  }

  .icon-showcase.rect .icon-showcase-circle:before {
    content: '';
    position: absolute;
    height: calc(100% + 70px);
    width: 100%;
    background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11.2346 1.31703C11.7247 1.11404 12.2753 1.11404 12.7654 1.31703L19.0128 3.9048C19.5029 4.10779 19.8922 4.49714 20.0952 4.98719L22.683 11.2346C22.886 11.7247 22.886 12.2753 22.683 12.7654L20.0952 19.0128C19.8922 19.5029 19.5029 19.8922 19.0128 20.0952L12.7654 22.683C12.2753 22.886 11.7247 22.886 11.2346 22.683L4.98719 20.0952C4.49714 19.8922 4.10779 19.5029 3.9048 19.0128L1.31703 12.7654C1.11404 12.2753 1.11404 11.7247 1.31703 11.2346L3.9048 4.98719C4.10779 4.49714 4.49714 4.10779 4.98719 3.9048L11.2346 1.31703Z' stroke='%23edc263' stroke-width='.2'/%3E%3C/svg%3E");
    background-size: calc(100%);
    width: calc(100% + 70px);
    transform: translate(-35px, -35px);
  }

  .icon-showcase-icon {
    position: absolute;
    width: 134px;
    height: 134px;
    background-color: var(--cor-prim-08);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    color: var(--cor-prim);
    border: 3px solid #FFF;
    box-shadow: 0 0 0 10px rgba(200, 200, 200, 0.2), 0 0 0 0 transparent;
  }

  .icon-showcase-icon img {
    padding: 15px;
    max-height: 70%;
    max-width: 80%;
  }

  .icon-showcase-icon:hover,
  .icon-showcase-icon.active {
    transform: scale(1.2);
    background-color: var(--cor-prim-07);
    color: var(--cor-prim);
    box-shadow: 0 0 0 10px rgba(200, 200, 200, 0.25), 0 0 0 30px rgba(200, 200, 200, 0.15);
  }

  .icon-showcase-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    width: 80%;
    transition: opacity 0.3s ease;
  }

  @media (max-width: 991px) {
    .icon-showcase {
      height: auto;
    }

    .icon-showcase-circle {
      position: relative;
      transform: none;
      top: 0;
      left: 0;
      border: none;
      display: flex;
      flex-direction: column;
      gap: 1rem;
    }

    .icon-showcase-circle:before {
      display: none;
    }

    .icon-showcase-icon {
      position: relative;
      width: 100%;
      height: auto;
      padding: 1rem;
      border-radius: 0.5rem;
      flex-direction: column;
      gap: 0.5rem;
      text-wrap: balance;
    }

    .icon-showcase-icon img {
      width: 96px;
      height: 96px;
      max-width: 96px;
      max-height: 96px;
    }

    .icon-showcase-icon h3,
    .icon-showcase-icon p {
      display: block !important;
      text-align: center;
      margin: 0;
    }

    .icon-showcase-content {
      display: none;
    }

    .icon-showcase-icon:hover,
    .icon-showcase-icon.active {
      transform: none;
    }
  }