/* Profil */
.profile {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(420px, 1.1fr);
  align-items: start;
  gap: clamp(0rem, 2vw, 2rem);
  max-width: 1200px;
  margin: 0 auto;
}

.profile-text {
  padding-top: clamp(1rem, 4vw, 3rem);
}

.profile-text p:first-child {
  margin-top: 0;
}

.profile-photos {
  position: relative;
  width: 100%;
  min-height: clamp(430px, 42vw, 610px);
  overflow: hidden;
}

.profile-photo {
  position: absolute;
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: 50%;
  will-change: transform;
}

.profile-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.profile-photo-1 {
  top: 12%;
  left: 3%;
  width: clamp(220px, 29vw, 390px);
  animation: float-photo-1 13s ease-in-out infinite alternate;
}

.profile-photo-2 {
  right: 8%;
  bottom: 3%;
  width: clamp(160px, 21vw, 280px);
  animation: float-photo-2 16s ease-in-out infinite alternate;
}

.profile-photo-3 {
  top: 2%;
  right: 1%;
  width: clamp(120px, 15vw, 205px);
  animation: float-photo-3 11s ease-in-out infinite alternate;
}

@keyframes float-photo-1 {
  0% { transform: translate(0, 0); }
  35% { transform: translate(18px, -14px); }
  70% { transform: translate(-12px, 16px); }
  100% { transform: translate(12px, 7px); }
}

@keyframes float-photo-2 {
  0% { transform: translate(0, 0); }
  40% { transform: translate(-20px, -12px); }
  75% { transform: translate(8px, 15px); }
  100% { transform: translate(-8px, -5px); }
}

@keyframes float-photo-3 {
  0% { transform: translate(0, 0); }
  45% { transform: translate(-14px, 13px); }
  75% { transform: translate(8px, -10px); }
  100% { transform: translate(-6px, 5px); }
}


/* Mobil */
@media (max-width: 800px) {

  /* Profil */
  .profile {
	grid-template-columns: 1fr;
	gap: 2rem;
  }

  .profile-text {
	padding-top: 0;
  }

  .profile-photos {
	min-height: clamp(380px, 100vw, 540px);
  }

  .profile-photo-1 {
	top: 12%;
	left: 3%;
	width: 55%;
  }

  .profile-photo-2 {
	right: 4%;
	bottom: 4%;
	width: 39%;
  }

  .profile-photo-3 {
	top: 1%;
	right: 2%;
	width: 29%;
  }

  
@media (prefers-reduced-motion: reduce) {
  html {
	scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
	animation: none !important;
	transition: none !important;
  }
}