*, *::after, *::before {
    border: 0;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
  --hue: 206;
  --bkg: var(--hue) 50% 96%;
  --text: var(--hue) 70% 9%;
  --dark: var(--hue) 70% 3%;
 
}

/* body {
  min-height: 100vh;
  display: grid;
  place-items: center;
  background: linear-gradient(hsl(var(--text)), hsl(var(--dark)));
} */

.container {
  max-width: 1250px;
  margin: auto;
}

.image-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
  overflow: hidden;
  display: grid;
  grid-template-columns: repeat(3,1fr);
}

.image-container p{
  text-align: center;
  margin: 20px;
  font-size: 22px;
  font-weight: 600;
  color: black;
  text-decoration: underline;
}

.image-item {
  flex: 1 0 28%;
  min-width: 200px;
  cursor: zoom-in;
}

.image-item img {
  width: 100%;
  height: 100%;
  height: 300px;
  object-fit: cover;
  transition: transform 250ms cubic-bezier(0.79, 0.25, 0, 1.07);
  border-radius: 4px;
  box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;--bkg                                                           Ṣ
}

.image-item:is(:hover, :focus) img {
  transform: scale(1.03);

}




@media (max-width: 766.98px) {
  .image-container {
    grid-template-columns: repeat(1,1fr);
  }

  .modal__btn {
    display: grid;
    place-items: center;
    background-color: hsl(var(--bkg) / .5);
    color: hsl(var(--text));
    padding: 0rem;
    border: 0px solid transparent;
    border-radius: 50%;
    cursor: pointer;
    transition: background-color 250ms cubic-bezier(0.9, 0, 0, 0.96), border 250ms cubic-bezier(0.9, 0, 0, 0.96);
}
}



/* gallery .css    */