/* Reset some default styles */
body, html {
    margin: 0;
    padding: 0;

}

@font-face {
    font-family: "ITC";
    src: url(/fonts/BenguiatStd-Medium.otf);
}

@font-face {
    font-family: "ITC2";
    src: url(/fonts/BenguiatStd-Book.otf);
}

a{
    font-size: 6vw;
    margin: auto;
    margin-left: 45px; 
    text-align: center;
}

#banner{
    width: 99%;
    height: 10vw;
    background-color: #ddd287;
    border: #cb5b5b;
    border-width: 10px;
    border-style: solid;
    
}

/* Apply a flexible layout to the image grid */
.image-grid {
    display: flex;
    flex-wrap: wrap;
  
    margin-top: 0px; /* Adjust the margin as needed */
}

.image-box {
    width: 33%;/* Set the width to 30% */
    padding: 0px;
    box-sizing: border-box;
    text-align: center;
}

.image-box:nth-of-type(8) {
    width: 66%;
}

/* Ensure the images maintain aspect ratio */
.image-box img {
    max-width: 100%;
    height: auto;
}

.image-box-large {
    grid-column: span 2; /* Make the image box span two columns */
}

figcaption {
    font-size: 1.2vw;
}

.image-grid{
    border: #cb5b5b;
    border-width: 10px;
    border-style: solid;
}




/* Responsive design for tablets */
@media (max-width: 768px) {
    .image-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .image-box-small:nth-child(7),
    .image-box-small:nth-child(8) {
        grid-column: span 1;
    }

    .image-box-small {
        width: 200%; /* Set the width to 50% to make two images fit in a row */
    }

    a{
        font-size: 7vw;
        margin: auto;
        margin-left: 50px; 
    }

    figcaption {
        font-size: 1.8vw;
    }
    
    #banner{
        width: 99%;
        height: 15vw;
        background-color: #ddd287;
        border: #cb5b5b;
        border-width: 10px;
        border-style: solid;
    }

}

/* Responsive design for phones */
@media (max-width: 480px) {
    .image-grid {
        grid-template-columns: repeat(1, 1fr);
    }

    .image-box-small:nth-child(7),
    .image-box-small:nth-child(8) {
        grid-column: span 1;
    }

    .image-box-small {
        width: 200%; /* Set the width to 50% to make two images fit in a row */
    }

    h1{
        font-size: 36px;
    }

    figcaption {
        font-size: 2.2vw;
    }


}