.team {
  gap: 3.75rem;
}

.team .team__top .heading {
  margin-bottom: 1rem;
}

.team .team__departments{
	gap: 1rem;
}

.team .team__departments button{
	border-radius: 0.5rem;
	border: 1px solid var(--black-400, rgba(26, 24, 36, 0.10));
	background: var(--purple-300, #F9F8FC);
	backdrop-filter: blur(1rem);
	padding: 1rem 1.25rem;
	transition: all .3s linear;
	cursor: pointer;
	margin-bottom: 0px;
}

.team .team__departments button.active,
.team .team__departments button:hover,
.team .team__departments button:focus{
	border-color: var(--primary-600, rgba(73, 28, 143, 0.40));
	background: var(--purple-800, #9C6FE1);
	color: var(--purple-300, #F9F8FC);
}

.team .team__members {
  display: grid; 
	grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
  gap: 1.5rem;
}

.team .team__members .team__member {
  position: relative;
  overflow: hidden;
  height: 22.5rem;
  width: 100%;
  padding: 1rem;
  border-radius: 0.75rem;
  border: 1px solid var(--black-600, #B5B6C3);
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	align-items: flex-start;
}

.team .team__members .team__member .member__image {
  position: absolute;
  top: 0px; 
  left: 0px;
  width: 100%;
	height: 100%;
	z-index: -1;
}

.team .team__members .team__member .member__image img{
	width: 100%;
	height: 100%;
}

.team .team__members .team__member .member__contacts{
	gap: 0.5rem;
	list-style: none;
	padding: 0px;
}

.team .team__members .team__member .member__contacts a{
	display: block;
	padding: 1rem;
	border-radius: 0.75rem;
	background: rgba(255, 255, 255, 0.30);
	backdrop-filter: blur(1.25rem);
}

.team .team__members .team__member .member__contacts a svg{
	width: 1.5rem;
	height: 1.5rem;
	fill: var(--white-1000, #fff);
}

.team .team__members .team__member .member__data {
	width: 100%;
  padding: 1rem 1.25rem;
  background: var(--white-1000, #fff);
  border-radius: 1.25rem;
}


.team .team__members .team__member .member__data .member__name {
  margin-bottom: 0.375rem;
}

.team .team__members .team__member .member__position {
  color: var(--black-900, #444658);
  margin: 0px;
}

.team .team__members .team__member:not(:hover) .member__position{
	  text-overflow: ellipsis;
  overflow: hidden;
  max-width: 100%;
  white-space: nowrap;
}

.team .team__banner {
	position: relative;
	border-radius: 0.5rem;
	overflow: hidden;
	background-color: var(--black-1000, #1A1824);
	background-position: 50%;
	background-size: cover;
	background-repeat: no-repeat;
	padding: 7rem 7.625rem;
}

.team .team__banner::before{
	display: block;
	content: "";
	
	position: absolute;
	top: 0px; 
	left: 0px; 
	width: 120rem;
	height: 67.625rem;
	background: var(--primary-700, rgba(33, 0, 85, 0.60));
	filter: blur(9.375rem);
	z-index: -1;
}

.team .team__banner .banner__title {
  color: var(--white-1000, #FFF);
  margin-bottom: 1.5rem;
}

.team .team__banner .banner__text {
  color: var(--white-1000, #FFF);
}

@media screen and (max-width: 1023px) {
  .team .team__members {
		grid-template-columns: 1fr 1fr 1fr 1fr;
	}
	
	.team .team__banner {
		padding: 5rem 2rem;
	}
	
	.team .team__banner .banner__button{
		flex-shrink: 0;
	}
}

@media screen and (max-width: 767px) {
	.team .team__departments-dropdown .dropdown__button {
        border-radius: 0.5rem;
        border: 1px solid var(--black-400, rgba(26, 24, 36, 0.1));
        background: var(--purple-300, #f9f8fc);
        backdrop-filter: blur(1rem);
        width: 100%;
        padding-left: 0px;
        padding-right: 0px;
    }
	
   .team .team__members {
		grid-template-columns: 1fr 1fr;
	   gap: 1rem;
	}
	
	.team .team__members .team__member{
		height: 20rem;
	}
	
	.team .team__members .team__member .member__contacts a{
		padding: 0.75rem;
	}
	
	.team .team__banner {
		padding: 2.5rem 1rem;
	}
	
	.team .team__banner .banner__title{
		margin-bottom: 1rem;
	}
	
	.team .team__banner .banner__button{
		margin-top: 1.5rem;
	}
	
}