* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
h1 {
    margin: 10px auto 0px auto;
    ffont-family: 'Russo One', sans-serif;
    text-align: center;
    color: #23130E;
}
.container {
    width: 100%;
    height: 90vh;
    display: flex;
    align-items: center;
 }
.gallery {
    display: grid;
    grid-template-columns: repeat(8, minmax(10px, 1fr));
    grid-template-rows: repeat(4, 10vw);
    grid-gap: 16px;
    background-color: #B46522;
    padding: 0 auto 10px auto;
}
.img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.7;
    transition: opacity 0.5s;
}
.img:hover {
    opacity:1;
}
.img-1 {
    grid-column: 1 / 3;
    grid-row: 1 / 2;
}
.img-2 {
    grid-column: 3 / 6;
    grid-row: 1 / 3;
}
.img-3 {
    grid-column: 6 / 8;
    grid-row: 1 / 2;
}
.img-4 {
    grid-column: 8 / 9;
    grid-row: 1 / 3;
}

.img-5 {
    grid-column: 1 / 3;
    grid-row: 2 / 4;
}
.img-6 {
    grid-column: 3 / 5;
    grid-row: 3 / 4;
}

.img-7 {
    grid-column: 6 / 8;
    grid-row: 2 / 4;
}
.img-8 {
    grid-column: 5 / 6;
    grid-row: 3 / 5;
}
.img-9 {
    grid-column: 1 / 3;
    grid-row: 4 / 5;
}
.img-10 {
    grid-column: 3 / 5;
    grid-row: 4 / 5;
}
.img-11 {
    grid-column: 6 / 8;
    grid-row: 4 / 5;
}
.img-12 {
    grid-column: 8 / 9;
    grid-row: 3 / 5;
}
.img9: hover{

}