.notification {
  position: relative;
  border-radius: 3px;
  padding: 10px 20px 20px;
  margin: 40px 0;
  color: var(--color-dark);
  box-shadow: 0 0 4px 2px inset currentColor;
  padding-left: 20%;

  &::before {
    content: 'i';
    position: absolute;
    display: flex;
    left: 0;
    top: 0;
    height: 100%;
    width: 20%;
    font-size: 100px;
    align-items: center;
    justify-content: center;
  }
}

@media (max-width: 768px) {

  .notification {

    padding-left: 40px;

    &::before {
      height: auto;
      width: 45px;
      font-size: 40px;
      top: 15px;
    }
  }
}

.notification-danger {
  color: #c51919 ;

  &::before {
    content: '!';
  }
}

.notification__content {
  color: var(--color-font);
}