@font-face {
    font-family:cause;
    src:url(font/ALLED__.TTF);
}

body {
    margin:auto;
    box-sizing: border-box;
    display: flex;
}

.container{
    display:flex;
    position: absolute;
    width:80%;
    height:500%;
    left:10%;
    top:20%;
    border:2px solid transparent;
    border-radius: 10px;
}

h1{
    position:absolute;
    font-size:40px;
    left:40%;
    top:5%;
    color:rgb(127, 49, 230);
    font-family: cause;
}

body {
    font-family: Arial, sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-color: #f4f4f4;
}

.gallery {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 10px;
    max-width: 100%;
}

/* instead, let the <img> size itself */
.gallery img {
  display: block;      /* remove inline‐gap white space */
  width: 100%;         /* fluid width */
  height: auto;        /* keep natural aspect ratio */
  border-radius: 5px;  /* if you still want rounding on the image */
  transition: transform 0.3s ease;
}

/* put the border on the container so it’s uniform */
.gallery a {
  display: block;
  border: 1px solid black;
  border-radius: 5px;
  overflow: hidden;    /* clips any overflow if you use object-fit */
}

.gallery img:hover {
  transform: scale(1.05);
}