.ws-feed {
  width: 100%;
  padding-top: 10px;
  padding-bottom: 100px;
}

.ws-feed-item {
  display: block;
  margin: 0 5% 5%;
  /* background-color: #FFF; */
  border-radius: 10px;
  /* padding: 20px; */
}
.ws-feed-item .expand-post {
  cursor: pointer;
}

.ws-feed-item .identity {
  /* position: absolute; */
  /* bottom: 22.5%; */
  padding-left: 0;
  padding-right: 0;
  background-color: #FFF;
  border-radius: 500px;
  /* border: 2px solid #C2C2C2; */
  align-self: center;
  /* z-index: 1; */
}
.ws-feed-item .identity .profile-picture {padding: 0; transform: scale(1.1);}
.ws-feed-item .identity img {width: 100%;}
.ws-feed-item .identity .names {line-height: 0.8rem; color: #A76B74; padding: 2px 10px;}
.ws-feed-item .identity .names .fullname {text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 0.7rem;}
.ws-feed-item .identity .username {font-size: x-small;}

.ws-feed-item .photo {display: block; width: 85%; margin-left: 15%; position: relative;}
.ws-feed-item .photo > img {width: 100%; aspect-ratio: 1/1; object-fit: cover; object-position: center center; border-radius: 10px 10px 0 0;}

.ws-feed-item .post-interaction {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  left: 7.5%;
  margin-top: 20px;
}
.ws-feed-item .post-interaction a {display: flex; align-items: center; justify-content: center; flex-direction: column; margin-bottom: 20px; color: #82373B;}
/* .ws-feed-item .post-interaction a span {} */
.ws-feed-item .post-interaction img {width: 1.25rem;}
.ws-feed-item .post-interaction .active {
  filter: invert(79%) sepia(66%) saturate(1125%) hue-rotate(292deg) brightness(100%) contrast(91%);
  animation: interactive-click .5s;
}
@keyframes interactive-click {
  0% {scale: 100%;}
  50% {scale: 120%;}
  100% {scale: 100%;}
}

.ws-feed-item .shades-complexion {
  position: absolute;
  top: -15%;
  right: 2.5%;
  font-family: 'Montserrat Bold Italic';
  border-radius: 500px;
  background-size: cover;
  background-color: rgba(255,255,255,0.3);
  backdrop-filter: blur(30px);
  color: #000;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 5px 0;
}
.ws-feed-item .shades-complexion span {font-size: 0.75rem;}
.ws-feed-item .shades-complexion .complexion-color {border-radius: 50%; width: 35px; height: 35px;}

.ws-feed-item .description {
  background-image: linear-gradient(to top, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 80%, rgba(255,255,255,0) 100%);
  padding-top: 50px;
  padding-bottom: 20px;
  margin-top: -40px;
  position: relative;
  border-radius: 0 0 10px 10px;
  --bs-gutter-x: 0;
}
.ws-feed-item .description .sub {margin-top: -1rem;}
.ws-feed-item .description p {font-weight: normal; color: #777; font-size: 0.8rem; white-space: pre-line; margin: 2rem 1rem; max-width: 90%;}
.ws-feed-item .description p .recommend {border-radius: 500px; border: 1px solid #82373B; color: #82373B; padding: 10px;}
.ws-feed-item .description .season-box {
  font-family: 'Montserrat Bold Italic';
  border-radius: 10px;
  background-size: cover;
  color: #FFF;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 1px;
  width: 19%;
  margin-left: 5%;
}
.ws-feed-item .description .season-box.warm {background-image: url(../images/warm.png);}
.ws-feed-item .description .season-box.cool {background-image: url(../images/cool.png);}
.ws-feed-item .description .season-box.warm-spring {background-image: url(../images/warm-spring.png);}
.ws-feed-item .description .season-box.cool-summer {background-image: url(../images/cool-summer.png);}
.ws-feed-item .description .season-box.warm-autumn {background-image: url(../images/warm-autumn.png);}
.ws-feed-item .description .season-box.cool-winter {background-image: url(../images/cool-winter.png);}
.ws-feed-item .description .season-box span:first-child {font-size: 1rem;}
.ws-feed-item .description .season-box span:last-child {font-size: 0.4rem;}

.ws-feed-item .color-palette {
  width: 100%;
  /* height: 100%; */
  line-height: 0;
  border-radius: 10px;
  margin-top: 2px;
}
.ws-feed-item .color-palette .color {
  display: inline-block;
  width: 10%;
  height: 15px;
}