<!-- <h1>Our Team</h1> -->
<div class="container">
  <div class="photos-detail">
    <img src="https://images.unsplash.com/photo-1544005313-94ddf0286df2?ixid=MXwxMjA3fDB8MHxzZWFyY2h8OHx8aHVtYW58ZW58MHx8MHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60" alt="photo">
    <div class="user-detail">
      <h2 class="name">Leyla Rzayeva</h2>
      <p class="profession">Frontend Developer</p>
     <div class="social-medias">
        <a href="#"><i class="fab fa-instagram"></i></a>
        <a href="#"><i class="fab fa-twitter"></i></a>
        <a href="#"><i class="fab fa-facebook"></i></a>
        <a href="#"><i class="fab fa-linkedin"></i></a>
      </div>
    </div>
  </div>
  <div class="photos-detail">
    <img src="https://images.unsplash.com/photo-1554151228-14d9def656e4?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=333&q=80" alt="photo">
    <div class="user-detail">
      <h2 class="name">Aysel Aliyeva</h2>
      <p class="profession">Fullstack Developer</p>
      <div class="social-medias">
        <a href="#"><i class="fab fa-instagram"></i></a>
        <a href="#"><i class="fab fa-twitter"></i></a>
        <a href="#"><i class="fab fa-facebook"></i></a>
        <a href="#"><i class="fab fa-linkedin"></i></a>
      </div>
    </div>
  </div>
  <div class="photos-detail">
    <img src="https://images.unsplash.com/photo-1593104547489-5cfb3839a3b5?ixid=MXwxMjA3fDB8MHxzZWFyY2h8MzB8fGh1bWFufGVufDB8fDB8&ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60" alt="photo">
    <div class="user-detail">
      <h2 class="name">Sevda Agayeva</h2>
      <p class="profession">Backend Developer</p>
      <div class="social-medias">
        <a href="#"><i class="fab fa-instagram"></i></a>
        <a href="#"><i class="fab fa-twitter"></i></a>
        <a href="#"><i class="fab fa-facebook"></i></a>
        <a href="#"><i class="fab fa-linkedin"></i></a>
      </div>
    </div>
  </div>
</div>

body {
  min-height:100vh;
  font-family:Cambria;
}

.container {
  min-height:100vh;
  display:flex;
  justify-content:space-evenly;
  align-items:center;
}
.photos-detail {
  // border:1px solid red;
  padding:2rem;
  transition:350ms ease-in-out;
  box-shadow: 0 4px 20px 3px rgb(0 0 0 / 10%);
    border-radius: 10px;
}
img {
  width:150px;
  height:150px;
  border-radius:50%;
  transition:500ms ease-in-out;
}
.social-medias {
  // background:lightblue;
  display:flex;
  justify-content:space-between;
  margin:2rem 0 0;
  transition:350ms ease-in-out;
}
.social-medias>a {
  color:black;
}
h2{
  transition:350ms ease-in-out;
}
p {
  text-align:center;
  margin-top:-10px;
  color:red;
  transition:350ms ease-in-out;
}
.photos-detail:hover {
  background:red;
}
.photos-detail:hover img {
  transform:rotate(15deg);
}
.photos-detail:hover .user-detail h2,
.photos-detail:hover .user-detail p,
.photos-detail:hover .social-medias>a{
  color:white;
}
@media only screen and (max-width: 762px) {
  body {
    // background-color: lightblue;
  }
  .container {
  flex-direction:column;
  gap:40px;
}
}