#solution {
  margin: 9em;

  .pl-container {
    padding: 3em;
    background-color: var(--bg-light-gray);
    border-radius: 10px;
    width: 100%;

    .icon {
      transition: all .2s ease-in, transform .1s ease-in;
      background-color: var(--bs-gray-400);
      padding: 0.2em;
      border-radius: 50%;
      border: none;
      color: #6CAED2;
      z-index: 3;

      &.selected {
        background-color: var(--green);
        color: white;
      }

      &:hover {
        transform: scale(110%, 110%);
      }

      svg {
        height: 32px;
        width: auto;
        margin: .75em;
        aspect-ratio: 1/1;
      }
    }

    .icon-description {
      width: 50%;
      z-index: 3;

      .description-area {
        width: 90%;

        * {
          width: 100%;
        }
      }
    }

    .absolute-img {
      bottom: 3em;
      left: -2em;

      img {
        max-width: 25vw;
      }
    }

    .contact-button {
      position: relative;
      z-index: 3;
    }
  }
}

@media only screen and (max-width: 768px) {
  #solution {
    margin: unset;

    .pl-container {
      .icon svg {
        margin: .5em;
      }

      .icon-description {
        width: 100%;
        margin-bottom: 4em;

        .description-area {
          width: 100%;
        }
      }

      .absolute-img {
        bottom: 2em;
        left: 0.5em;

        img {
          max-width: revert;
          max-height: 15vh;
        }
      }
    }
  }
}