/* Globals */
body {
    font-family: "Inter", sans-serif;
   
    padding: 2rem 1.5rem;
    margin: 0 auto;
  }
  
  h1 {
    font-weight: 900;
  }
  
  p {
    max-width: 60ch;
  }
  
  a {
    color: currentcolor;
  }
  
  /* Utilities */
  .auto-grid {
    display: grid;
    grid-template-columns: repeat(
      auto-fill,
      minmax(var(--auto-grid-min-size, 14rem), 1fr)
    );
    list-style: none; 
    grid-gap: 30;
    gap: 30px; /* Adds spacing between items */
    padding: 0;
  }
  
  .flow > * + * {
    margin-top: var(--flow-space, 1em);
  }
  
  /* Composition */
  .team {
    --flow-space: 2em;
  }
  
  /* Blocks */
  .profile {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    aspect-ratio: 1/1;
    position: relative;
    padding: 1.5rem;
    backface-visibility: hidden;
    text-decoration: none;
    overflow: hidden;
  }
  
  .profile::before,
  .profile::after {
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    /*inset: 0;*/
    top: 0;
    left: 0;
  }
  
  .profile::before {
    background: linear-gradient(
      to top,
      hsl(0 0% 0% / 0.79) 0%,
      hsl(0 0% 0% / 0.787) 7.8%,
      hsl(0 0% 0% / 0.779) 14.4%,
      hsl(0 0% 0% / 0.765) 20.2%,
      hsl(0 0% 0% / 0.744) 25.3%,
      hsl(0 0% 0% / 0.717) 29.9%,
      hsl(0 0% 0% / 0.683) 34.3%,
      hsl(0 0% 0% / 0.641) 38.7%,
      hsl(0 0% 0% / 0.592) 43.3%,
      hsl(0 0% 0% / 0.534) 48.4%,
      hsl(0 0% 0% / 0.468) 54.1%,
      hsl(0 0% 0% / 0.393) 60.6%,
      hsl(0 0% 0% / 0.31) 68.3%,
      hsl(0 0% 0% / 0.216) 77.3%,
      hsl(0 0% 0% / 0.113) 87.7%,
      hsl(0 0% 0% / 0) 100%
    );
    transition: 300ms opacity linear;
  }
  
  .profile::after {
    background: linear-gradient(
      45deg,
      hsl(5 97% 63% / 0.7) 0,
      hsl(5 97% 63% / 0) 100%
    );
    opacity: 0;
    transition: 300ms opacity linear;
  }
  
  .profile > * {
    z-index: 1;
  }

  .profile {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    position: relative;
    padding: 1.5rem;
    backface-visibility: hidden;
    text-decoration: none;
    overflow: hidden;
    aspect-ratio: 542 / 735;
    width: 100%;
    max-width: 542px;
  }
  
  .profile img {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    margin: 0;
    z-index: -1;
    object-fit: cover;
    transition: filter 200ms ease, transform 250ms linear;
  }
  
  .profile h2,
  .profile p {
    transform: translateY(2ex);
  }
  
  .profile h2 {
    font-size: 1.7rem;
    line-height: 1.2;
    font-weight: 900;
    letter-spacing: 0.03ch;
    transition: 300ms transform ease;
  }
  
  .profile p {
    font-size: 1.2rem;
    font-weight: 500;
  }
  
  .profile p {
    opacity: 0;
    transition: 300ms opacity linear, 300ms transform ease-in-out;
  }
  
  
  .profile:focus {
    outline: 0.5rem solid white;
    outline-offset: -0.5rem;
  }
  
  .profile:hover :is(h2, p),
  .profile:focus :is(h2, p) {
    transform: none;
  }
  
  .profile:hover::after,
  .profile:focus::after,
  .profile:hover::before,
  .profile:focus::before {
    opacity: 0.7;
  }
  
  .profile:hover p,
  .profile:focus p {
    opacity: 1;
    transition-delay: 200ms;
  }
  
  .profile:hover img,
  .profile:focus img {
    filter: grayscale(0);
    transform: scale(1.05) rotate(1deg);
  }


  /* Background Hero Slider*/
  .slider-container {
    position: relative;
    width: 100%;
    height: 100vh; /* adjust the height as needed */
    overflow: hidden;
  }
  
  .slider {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
  
  .slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    opacity: 0;
    transition: opacity 1s;
  }
  
  .slide.active {
    opacity: 1;
  }
  
  .content {
    position: relative;
    z-index: 1;
    text-align: center;
    padding: 20px;
  }
  
  /* Optional: add navigation buttons */
  .slider-nav {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
  }
  
  .slider-nav button {
    background-color: #ff6b6b;
    border: none;
    padding: 10px 20px;
    cursor: pointer;
  }
  
  .slider-nav button:hover {
    background-color: #ddd;
  }

  @media (min-aspect-ratio: 443/400) {
    .profile {
      height: 100%;
    }
  }
  @media (max-aspect-ratio: 542/735) {
    .profile {
      width: 100%;
    }
  }