.school-picture {
    text-align: center;
    margin: 40px auto;
    background-color: rgb(192, 192, 111);
    width: 50%;
    height: 50%;
    max-width: 50%;
    padding: 10px;
    border-radius: 10px;
}

.image-container {
    width: 50%;
    /* adjust width as needed */
    margin: 20px auto;
    /* center the container */
}

.image-container img {
    width: 100%;
    /* fill the container */
    height: auto;
    /* maintain aspect ratio */
}

img {
    width: 50vw;
    /* 50% of the viewport width */
    height: auto;
    /* maintain aspect ratio */
    margin: 20px;
    /* add some margin around the image */
    display: block;
    /* prevent image from overflowing */
    max-width: 100%;
    /* ensure image doesn't exceed parent container */
}

body {
    font-family: "YourFont", "Segoe UI Emoji", "Noto Color Emoji", "Apple Color Emoji", sans-serif;
}


.grid-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
    gap: 5px;
    width: 100%;
    max-width: 100%;
    background-color: rgba(128, 0, 0, 0.247);
}
.grid-container h2 {
    color: yellow;
}
.directions-sectionr {
    background-color: maroon;
    padding: 40px 20px;
    margin-top: 40px;
    text-align: left;
    justify-content: center;
    background-size: auto;
    background-position-x: left;
    color: yellow;
    border: #66000000;
}
.directions-sectionr a {
color: white;
text-align: left 5px;
font-weight: bold;
}
.directions-sectionr h1 {
    color: white;
}

.directions-sectionr h2 {
    color: yellow;
    margin-bottom: 20px;
}
.social-icons {
    margin-top: 10px;
}

.social-icons a {
    color: yellow;
    background-color: maroon;
    border: 2px solid yellow;
    display: inline-block;
    width: 40px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    border-radius: 50%;
    margin: 0 8px;
    font-size: 20px;
    transition: all 0.3s ease;
}

.social-icons a:hover {
    background-color: rgb(255, 255, 255);
    color: maroon;
    transform: scale(1.2);
}