/* ---------------------------------------------- */
/*  AFP portrait gallery page stylesheet# 1/10/21 */
/* ---------------------------------------------- */



body {
background-color: #222222;
display: flex;
flex-direction: column;
align-items: center;
font-family: sans-serif;
}

h1 {
color: #5EBFB5;
}


#parent {
display: grid;
grid-template-columns: repeat(3, 90px);
grid-template-rows: repeat(5, 1fr);
grid-column-gap: 20px;
grid-row-gap: 20px;

height: 500px;
text-align: center;
}

/* this resizes the image to fit each cell. check aspect ratio first?  */
#size {
width: 100%;
height: 100%;
}

#div1 {
grid-area: 1 / 1 / 2 / 2;
background-color: green;
overflow: hidden;
}
#parent img {
transition: 0.7s ease;
}
#parent img:hover {
transform: scale(1.2);
}


#div2 {
grid-area: 1 / 2 / 2 / 3;
background-color: green;
overflow: hidden;
}
#div3 {
grid-area: 1 / 3 / 2 / 4;
background-color: green;
overflow: hidden;
}
#div4 {
grid-area: 2 / 1 / 3 / 2;
background-color: green;
overflow: hidden;
}
#div5 {
grid-area: 2 / 2 / 3 / 3;
background-color: green;
overflow: hidden;
}
#div6 {
grid-area: 2 / 3 / 3 / 4;
background-color: green;
overflow: hidden;
}
#div7 {
grid-area: 3 / 1 / 4 / 2;
background-color: green;
overflow: hidden;
}
#div8 {
grid-area: 3 / 2 / 4 / 3;
background-color: green;
overflow: hidden;
}
#div9 {
grid-area: 3 / 3 / 4 / 4;
background-color: green;
overflow: hidden;
}
#div10 {
grid-area: 4 / 1 / 5 / 2;
background-color: green;
overflow: hidden;
}
#div11 {
grid-area: 4 / 2 / 5 / 3;
background-color: green;
overflow: hidden;
}
#div12 {
grid-area: 4 / 3 / 5 / 4;
background-color: green;
overflow: hidden;
}
#div13 {
grid-area: 5 / 1 / 6 / 2;
background-color: green;
overflow: hidden;
}
#div14 {
grid-area: 5 / 2 / 6 / 3;
background-color: green;
overflow: hidden;
}
#div15 {
grid-area: 5 / 3 / 6 / 4;
background-color: green;
overflow: hidden;
}

#back {
text-decoration: none;
color: #F2075D;
padding: 20px;
background-color: #5EBFB5;
border: none;
border-radius: 6px;
}




/* footer section */
footer {
display: flex;
height: 60px;
width: 100%;
background-color: gray;
justify-content: space-around;
align-items: center;
font-size: 12px;
margin-top: 10px;
}

#badges {
width: 80px;
display: flex;
justify-content: space-between;
color: pink;
}

#badges ion-icon {
width: 30px;
height: 30px;
}
#badges a {
color: #F2075D;
}
#badges a:hover {
color: pink;
}

#ws {
width: 50px;
text-align: center;
}