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

body {
    font-family: Arial, sans-serif;
    background-color: #f5f5f5;
}

header {
    background-color: #fff;
    padding: 1rem;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

nav {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo img {
    height: 50px;
}

.menu {
    display: flex;
    list-style: none;
    gap: 2rem;
}

.menu a {
    text-decoration: none;
    color: #333;
    font-weight: 500;
}

.menu a:hover {
    color: #666;
}

.intro {
    max-width: 1200px;
    margin: 3rem auto 2rem;
    padding: 0 1rem;
    text-align: center;
}

h1 {
    font-size: 2.5rem;
    margin-bottom: 1rem;
    color: #333;
}

.intro p {
    font-size: 1.1rem;
    color: #666;
    line-height: 1.6;
    max-width: 800px;
    margin: 0 auto;
}

h2 {
    font-size: 2rem;
    color: #333;
    margin-bottom: 2rem;
    text-align: center;
}

.gallery-container {
    max-width: 1200px;
    margin: 2rem auto;
    padding: 0 1rem;
}

.gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
}

.card {
    /*background: #fff;*/
    border-radius: 9px;
    overflow: hidden;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

.card.brown1 {background: #DDCFB0;}
.card.brown2 {background: #C08F57;}
.card.brown3 {background: #A26732;}
.card.brown4 {background: #84513C;}
.card.brown5 {background: #5E3834;}
.card.purple1 {background: #E4DAF0;}
.card.purple2 {background: #A876C2;}
.card.purple3 {background: #6D2E98;}
.card.purple4 {background: #302C88;}
.card.purple5 {background: #1C1239;}
.card.magenta1 {background: #FAD1EB;}
.card.magenta2 {background: #EF5EB7;}
.card.magenta3 {background: #EC1591;}
.card.magenta4 {background: #B90C47;}
.card.magenta5 {background: #5F052E;}
.card.red1 {background: #FBC386;}
.card.red2 {background: #F6862C;}
.card.red3 {background: #EE2621;}
.card.red4 {background: #B9161D;}
.card.red5 {background: #710F14;}
.card.yellow1 {background: #FFFED9;}
.card.yellow2 {background: #FFF980;}
.card.yellow3 {background: #FFF30F;}
.card.yellow4 {background: #FDD204;}
.card.yellow5 {background: #FAB20A;}
.card.green1 {background: #EEF6AC;}
.card.green2 {background: #B8DD16;}
.card.green3 {background: #59C134;}
.card.green4 {background: #22AD49;}
.card.green5 {background: #0C5839;}
.card.teal1 {background: #CCEDD9;}
.card.teal2 {background: #78D1B5;}
.card.teal3 {background: #3DBEAE;}
.card.teal4 {background: #2A9995;}
.card.teal5 {background: #0B545C;}
.card.blue1 {background: #D9F3F1;}
.card.blue2 {background: #74C9E8;}
.card.blue3 {background: #1FA7E3;}
.card.blue4 {background: #196FC1;}
.card.blue5 {background: #19336E;}
.card.white {background: #FFFFFF;}
.card.gray1 {background: #DEDEDE;}
.card.gray2 {background: #A7A6A6;}
.card.gray3 {background: #4F4C4C;}
.card.gray4 {background: #232020;}

.card img {
    width: 100%;
    /*height: 200px;*/
    aspect-ratio: 1 / 1.4;
    object-fit: cover;
    border-radius: 9px;
}

.card-content {
    /*padding: 1rem;*/
}

.card-caption {
    color: #333;
    font-size: 1rem;
}

footer {
    background-color: #333;
    padding: 3rem;
}

footer h5#copyright {
	color: #FFF;
}