details:nth-of-type(4n+1) summary::marker {
  color: #ffab2d;
}

details:nth-of-type(4n+2) summary::marker {
  color: #ff2d81;
}

details:nth-of-type(4n+3) summary::marker {
  color: #ab2dff;
}

details:nth-of-type(4n) summary::marker {
  color: #2d81ff;
}

img {
  image-rendering: pixelated;
  image-rendering: -moz-crisp-edges;
  image-rendering: crisp-edges;
}

.person-layout {
  display: flex;
  gap: 40px;
  margin: 0 auto;
  align-items: flex-start;
}

.person-left {
  flex: 0 0 300px;
  text-align: left;
}

.person-right {
  flex: 1;
  text-align: left;
}

.image-container {
  position: relative;
  width: 300px;
  height: 300px;
  margin: 0 0 20px 0;
}

.image-container img {
  position: absolute;
  top: 0;
  left: 0;
  max-width: 100%;
  width: 300px;
  height: 300px;
  transition: opacity 0.3s ease;
}

.main-image {
  opacity: 1;
}

.additional-image {
  opacity: 0;
}

.image-container:hover .main-image {
  opacity: 0;
}

.image-container:hover .additional-image {
  opacity: 1;
}

.person-left h2 {
  margin: 0 0 10px 0;
}

.person-left p {
  margin: 5px 0;
}

@media (max-width: 768px) {
  .person-layout {
    flex-direction: column;
  }

  .person-left {
    flex: 1;
    width: 100%;
  }
}