/* Globals */
/* body {
    font-family: "Inter", sans-serif;
    max-width: 55rem;
    padding: 2rem 1.5rem;
    margin: 0 auto;
    color: #241623;
    background: #eef2f4;
  } */
  
  h1 {
    font-weight: 900;
    font-size: 2.7rem;
    max-width: 20ch;
  }
  
  p {
    max-width: 60ch;
  }
  
  a {
    color: currentcolor;
  }
  
  @import url(https://fonts.googleapis.com/css?family=Raleway);

*, *:before, *:after{
  margin: 0;
  padding: 0;
  -webkit-box-sizing: border-box;
  -moz-box-sizing:border-box;
  box-sizing: border-box;
}
.gallery-view{
  padding: 1em 0;
  float: left;
  width: 50%;
}
@media screen and (max-width: 640px){
  .gallery-view{
    display: block;
    width: 100%;
  }
}

@media screen and (min-width: 900px){
  .gallery-view{
    width: 33.33333%;
  }
}

.gallery-view .title{
  color: #1a1a1a;
  text-align: center;
  margin-bottom: 10px;
}

.gallery-content {
  position: relative;
  width: 90%;
  max-width: 400px;
  margin: auto;
  overflow: hidden;
}
.gallery-content .gallery-overlay {
  background: rgba(0,0,0,0.7);
  position: absolute;
  height: 99%;
  width: 100%;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  opacity: 0;
  -webkit-transition: all 0.4s ease-in-out 0s;
  -moz-transition: all 0.4s ease-in-out 0s;
  transition: all 0.4s ease-in-out 0s;
}

.gallery-content:hover .gallery-overlay{
  opacity: 1;
}

.gallery-img{
  width: 100%;
}
.gallery-details {
  position: absolute;
  text-align: center;
  padding-left: 1em;
  padding-right: 1em;
  width: 100%;
  top: 50%;
  left: 50%;
  opacity: 0;
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  -webkit-transition: all 0.3s ease-in-out 0s;
  -moz-transition: all 0.3s ease-in-out 0s;
  transition: all 0.3s ease-in-out 0s;
}

.gallery-content:hover .gallery-details{
  top: 50%;
  left: 50%;
  opacity: 1;
}

.gallery-details h3{
  color: #fff;
  font-weight: 500;
  letter-spacing: 0.15em;
  margin-bottom: 0.5em;
  text-transform: uppercase;
}

.gallery-details p{
  color: #fff;
  font-size: 0.8em;
}
.fadeIn-top{
  top: 20%;
}


  /* Utilities */
  .auto-grid {
    display: grid;
    grid-template-columns: repeat(
      auto-fill,
      minmax(var(--auto-grid-min-size, 14rem), 1fr)
    );
    grid-gap: var(--auto-grid-gap, 0);
    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;
    color: #ffffff;
    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,
      hsla(165, 73%, 22%, 0.7) 0,
      hsl(5 97% 63% / 0) 100%
    );
    opacity: 0;
    transition: 300ms opacity linear;
  }
  
  .profile > * {
    z-index: 1;
  }
  
  .profile img {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    margin: 0;
    z-index: -1;
    object-fit: cover;
    filter: grayscale(1);
    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);
  }