components/member.css

.member-container {
  cursor: pointer;
  display: flex;
  position: relative;
  align-items: flex-start;
  justify-content: center;
}
.member-container1 {
  flex: 0 0 auto;
  width: 240px;
  height: 280px;
  margin: var(--dl-space-space-halfunit);
  display: flex;
  padding: var(--dl-space-space-unit);
  transition: 0.3s;
  align-items: center;
  border-radius: var(--dl-radius-radius-radius8);
  flex-direction: column;
  justify-content: center;
  background-color: #121212;
}
.member-container1:hover {
  box-shadow: 0px 2px 32px 24px #000000;
  background-color: #181818;
}
.member-image {
  width: 104px;
  height: 104px;
  min-width: var(--dl-size-size-small);
  min-height: var(--dl-size-size-small);
  object-fit: cover;
  border-radius: var(--dl-radius-radius-round);
}
.member-text {
  color: var(--dl-color-primary-300);
  margin-top: var(--dl-space-space-unit);
}
.member-text1 {
  color: var(--dl-color-gray-900);
  align-self: center;
  margin-top: var(--dl-space-space-halfunit);
  text-align: center;
  margin-bottom: var(--dl-space-space-halfunit);
}
.member-text2 {
  color: var(--dl-color-gray-500);
  width: 250px;
  display: none;
  text-align: center;
}
.member-icons {
  flex: 0 0 auto;
  display: flex;
  flex-wrap: wrap;
  margin-top: var(--dl-space-space-halfunit);
  align-items: center;
  margin-bottom: var(--dl-space-space-halfunit);
  justify-content: center;
}
.member-icon {
  fill: #D9D9D9;
  width: 20px;
  transition: 0.3s;
}
.member-icon:hover {
  fill: var(--dl-color-primary-500);
}
.member-icon2 {
  fill: #D9D9D9;
  width: 20px;
  transition: 0.3s;
  margin-left: var(--dl-space-space-unit);
  margin-right: var(--dl-space-space-unit);
}
.member-icon2:hover {
  fill: var(--dl-color-primary-500);
}
.member-icon4 {
  fill: #D9D9D9;
  width: 20px;
  transition: 0.3s;
}
.member-icon4:hover {
  fill: var(--dl-color-primary-500);
}





.rootClassName5 {
  align-self: center;
}








@media(max-width: 479px) {
  .member-container {
    width: auto;
  }
  .member-container1 {
    width: auto;
    height: auto;
    margin: 0px;
    padding-top: var(--dl-space-space-unit);
    padding-left: 24px;
    padding-right: 24px;
    padding-bottom: var(--dl-space-space-unit);
  }
  .member-image {
    width: var(--dl-size-size-medium);
    height: var(--dl-size-size-medium);
    min-width: var(--dl-size-size-small);
    min-height: var(--dl-size-size-small);
  }
  .member-text1 {
    width: var(--dl-size-size-medium);
  }
  .member-icon {
    width: var(--dl-size-size-xsmall);
  }
  .member-icon2 {
    width: var(--dl-size-size-xsmall);
  }
  .member-icon4 {
    width: var(--dl-size-size-xsmall);
  }
}