/* Reset CSS */

html, body {
padding: 0 0;
margin: 0 0;
}

p {
    padding-top: 1rem;
    text-align: center;
}

.frame {
    width: 1536px;
    max-width: 100%;
    height: auto;
    margin: 0 auto;

}

.row {
    display: flex;
    width: 100%;
    height: 35%;
    margin: 1rem 0;
}

.container {
    background: grey;
    width: 100%;
    height: 100%;
    margin: .5rem;
    border-radius: .5rem;

    /* apply background image sizing */
    background-size: cover;
    background-position: center;
}

/* images */

#c1 {
    background-image: url(../images/1.jpg);
}

#c2 {
    background-image: url(../images/2.jpg);
}

#c3 {
    background-image: url(../images/3.jpg);
}

#c4 {
    background-image: url(../images/4.jpg);
}

#c5 {
    background-image: url(../images/5.jpg);
}

#c6 {
    background-image: url(../images/6.jpg);
}

#c7 {
    background-image: url(../images/7.jpg);
}

#c8 {
    background-image: url(../images/8.jpg);
}

#c9 {
    background-image: url(../images/9.jpg);
}

#c10 {
    background-image: url(../images/10.jpg);
}

#c11 {
    background-image: url(../images/11.jpg);
}

#c12 {
    background-image: url(../images/12.jpg);
}


/* Flexbox and wrap styling */

.outer2 {
width: 1536px;
max-width: 100%;
margin: 0 auto;
}

.responsive2 {
padding-top: 2rem;
padding-bottom: 2rem;    
display: flex;
justify-content: space-evenly;
flex-wrap: wrap;
gap: 1rem; 
}

.responsive2 img {
 max-width: 100%;
  height: auto;
  }


/* Grid Layout */

.outer {
width: 1536px;
max-width: 100%;
height: auto;

margin: 0 auto;
padding-bottom: 1rem;

}

.responsive {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: auto;
gap: 15px;
margin-left: 1rem;
margin-right: 1rem;
}

.responsive img {
max-width: 100%;
height: auto;
}