.logo-wrap {
  display:grid;
  grid-template-columns: 1fr 1fr;
  box-sizing: border-box;
  overflow: hidden;
  margin-bottom: 12px;
  grid-column-gap: 10px;
}

.logo-select {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  min-height: 91px;
  background: #FFFFFF;
  border: none;
  border-radius: 4px;
  text-align: center;
  cursor: pointer;

  .logo-select-inner {
	width: 100%;
	height: 100%;
	border: none;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 3;
	display: flex;
	flex-direction:column;
	justify-content: center;
	align-items: center;
	cursor: pointer;
	background: transparent;
  }

  &:only-of-type {
	width: 100%;
	min-height: 91px;
	grid-column: span 2;
  }
  &.dark {
	background: #555D65;
  }

  &:hover {
	.logo-select-inner {
	  background: rgba(34, 113, 177, 0.88);
	}

	.add-icon {
	  fill: currentColor;
	  color: #FFFFFF;
	  top: 15%;
	}
	p {
	  pointer-events: none;
	  display: block;
	}
	.add-icon + p {
	  margin: 8px 0 0 0;
	}
  }

  p {
	flex-direction: column;
	font-weight: bold;
	color: #FFF;
	display: none;
  }

  .add-icon {
	flex-direction: column;
	transition: all .5s;
  }

  .remove {
	display: none;
	position: absolute;
	top: 0;
	right: 0;
	padding: 2px 0;
	width: 36px;
	height: 24px;
	background: red;
	color: #FFFFFF;
	z-index: 9999;
  }

  &:hover .remove {
	display: block;
  }

  img {
	position: absolute;
	z-index: 2;
	padding: 6px;
	margin: 6px;
	width: 80%;
	height: auto;
  }
}
