style1.css

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

html, body {
    height: 100%;
}

.head1 {
    font-size: 10vh;
    font-family: Kalnia;
    text-align: center;
    margin: 15% 2%;
    margin-left: 25%;
}

#b1 {
    font-size: 3vw;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    text-align: center;
    font-weight: lighter;
    font-style: italic;
}

.body {
    min-height: 100%;
    padding: 2%;
    background-color: rgb(241, 241, 239);
    display: flex;
    flex-direction: column;

    /* Adjustments for larger screens */
    @media screen and (min-width: 768px) {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }
}

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

/* ... (previous styles) ... */

.con2 {
    display: flex;
    flex-direction: column; /* Arrange items in a column on smaller screens */
    justify-content: center; /* Center items horizontally */
    align-items: center;
}

.slide {
    text-align: center;
    margin-bottom: 20px; /* Adjust margin as needed */
}

span {
    font-size: 2vw;
    margin-bottom: 1%; /* Adjust margin as needed */
    box-sizing: border-box;
}

.img-container {
    width: 200px; /* Set a fixed width for the container */
    height: 200px; /* Set a fixed height for the container */
    overflow: hidden; /* Hide overflow to maintain aspect ratio */
    margin-bottom: 2%; /* Adjust margin as needed */
}

img {
    width:100%; /* Make the image fill the container */
    height:auto;
}