/* Base area styling */
.devProfilesArea {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 9px;
  padding: var(--inElementPadding);
  font-family: var(--fontOne);
  height: 100%;
  width: 100%;
  max-height: 92px;
}

/* Base profile icon styling */
.oneDevProfile {
  --btn-size: 55px;
  --btn-width: var(--btn-size);
  --btn-height: var(--btn-size);
  width: var(--btn-width);
  height: var(--btn-height);
  border-radius: 16px;
  overflow: hidden;
  background-color: transparent;
  transition: width 0.2s ease, height 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  will-change: width, height;
}

.oneDevProfile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;
}

/* 🔥 Hover Effects: center icon */
.oneDevProfile:hover,
.oneDevProfile:focus-visible {
  --btn-width: calc(var(--btn-size) * 1.4);
  --btn-height: calc(var(--btn-size) * 1.4);
}

/* 🔥 Neighbors: directly before or after */
.oneDevProfile:has(+ .oneDevProfile:hover),
.oneDevProfile:has(+ .oneDevProfile:focus-visible),
.oneDevProfile:hover+.oneDevProfile,
.oneDevProfile:focus-visible+.oneDevProfile {
  --btn-width: calc(var(--btn-size) * 1.2);
  --btn-height: calc(var(--btn-size) * 1.2);
}

/* 🔥 Neighbors 2 away */
.oneDevProfile:has(+ .oneDevProfile + .oneDevProfile:hover),
.oneDevProfile:has(+ .oneDevProfile + .oneDevProfile:focus-visible),
.oneDevProfile:hover+.oneDevProfile+.oneDevProfile,
.oneDevProfile:focus-visible+.oneDevProfile+.oneDevProfile {
  --btn-width: calc(var(--btn-size) * 1);
  --btn-height: calc(var(--btn-size) * 1);
}

@media only screen and (max-width: 1280px) {
  .devProfilesArea {
    max-height: 83px;
  }

  .oneDevProfile {
    --btn-size: 45px;
    border-radius: 13px;
  }
}

@media only screen and (max-width: 1080px) {
  .devProfilesArea {
    height: 92px;
    max-height: 92px;
  }

  .oneDevProfile {
    --btn-size: 55px;
    border-radius: 16px;
  }
}

@media only screen and (max-width: 768px) {
  .devProfilesArea {
    height: 83px;
    max-height: 83px;
  }

  .oneDevProfile {
    --btn-size: 45px;
    border-radius: 13px;
  }
}

@media only screen and (max-width: 576px) {
  .devProfilesArea {
    height: 70px;
    max-height: 70px;
    gap: 7px;
  }

  .oneDevProfile {
    --btn-size: 32px;
    border-radius: 9px;
  }
}