/* Media and Button Styles */

/* Round image styling */
.circle-buttons {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: clamp(16px, 4vw, 40px);
    margin: clamp(40px, 8vw, 100px) auto;
    max-width: 600px;
}

.circle-button {
    width: clamp(40px, 3.5vw, 100px);
    height: clamp(40px, 3.5vw, 100px);
    background-color: var(--white);
    border-radius: 50%;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.25);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s ease;
}

.circle-button:hover {
    transform: scale(1.05);
}

.circle-button img {
    width: 60%;
    height: 60%;
    object-fit: contain;
    border-radius: 50%;
}

@media (max-width: 768px) {
    .round-image,
    .square-image {
      width: clamp(120px, 50vw, 300px);
      height: clamp(120px, 50vw, 300px);
    }
  
    .round-image {
      border-radius: 50%;
      object-fit: cover;
    }
  
    .circle-buttons {
      gap: 12px;
      margin-top: 16px;
    }
  
    .circle-buttons .circle-button {
      width: clamp(36px, 10vw, 50px);
      height: clamp(36px, 10vw, 50px);
      border-radius: 50%;
    }
  
    .circle-buttons .circle-button img {
      width: 100%;
      height: 100%;
      object-fit: cover; /* fill si tu veux couvrir strictement */
      border-radius: 50%;
    }
  }