.settings {
  &-cover {
    height: 8rem;
    width: 100%;
    background: #fff;
    border-radius: 0.25rem;
    padding: 0;
    border: 0;
    overflow: hidden;
    position: relative;

    &::after {
      content: "";
      position: absolute;
      z-index: 5;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(#fff, 0.5);
      background-position: center;
      background-size: 2rem;
      background-repeat: no-repeat;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='bi bi-paperclip' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 3a2.5 2.5 0 0 1 5 0v9a1.5 1.5 0 0 1-3 0V5a.5.5 0 0 1 1 0v7a.5.5 0 0 0 1 0V3a1.5 1.5 0 1 0-3 0v9a2.5 2.5 0 0 0 5 0V5a.5.5 0 0 1 1 0v7a3.5 3.5 0 1 1-7 0V3z'/%3E%3C/svg%3E");
      opacity: 0;
      visibility: hidden;
      transition: opacity ease-in-out 0.15s;
    }

    &-img {
      border-radius: 0.25rem;
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center;
    }

    &:focus,
    &:hover {
      outline: none;

      &::after {
        opacity: 1;
        visibility: visible;
      }
    }
  }
}
