.image-container {
  position: relative;
  height: 0;
  padding-bottom: 56.25%;
}

.image-container img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.share-link {
  display: flex !important;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid #F5BD1A;
  font-size: 18px;
  color: #777;
  background-color: #F5BD1A;
  transition: 0.3s;
}

.share-link:hover {
  color: #efefef !important;
  background: #777 !important;
  border: none !important;
}

.like-btn {
  border: none;
  background: transparent;
  padding: 6px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: gray;
  font-weight: 500;
  transition: color 0.3s ease;
}

.like-icon {
  width: 22px;
  height: 22px;
  filter: brightness(0) saturate(100%) invert(40%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(80%);
  transition: filter 0.3s ease, transform 0.2s ease;
}

.like-icon .liked{
  filter: brightness(0) saturate(100%) invert(40%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(80%);
}

.like-btn:hover .share-icon {
  filter: brightness(0) saturate(100%) invert(80%) sepia(52%) saturate(501%) hue-rotate(3deg) brightness(104%) contrast(98%);
  transform: scale(1.1);
}


.like-btn:hover {
  color: #F5BD1A;
}

.liked {
   filter: brightness(0) saturate(100%) invert(40%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(80%) !important;
}

.like-loader {
  width: 17px;
  height: 17px;
  border: 3px solid #fff;
  border-bottom-color: #000;
  border-radius: 50%;
  display: inline-block;
  box-sizing: border-box;
  animation: rotation 1s linear infinite;
}

@keyframes rotation {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}