body>div.wrapper>main>div>div:nth-child(1)>ul {
    padding: 0;
    list-style: none;
}

body>div.wrapper>main>div>div:nth-child(1)>ul>li>h5 {
    display: inline;
}

body>div.wrapper>main>div>div:nth-child(1)>ul>li {
    padding-top: 0.25em;
}

body>div.wrapper>main>div>div:nth-child(2)>div {
    margin-bottom: 5vh;
}

body>div.wrapper>main>div>div:nth-child(3) {
    margin-bottom: 5vh;

}

body>div.wrapper>main>div>div:nth-child(3)>div>div.col-8 li {
    list-style: none;
}

body>div.wrapper>main>div>div:nth-child(1) {
    margin-bottom: 5vh;
}

body>div.wrapper>main>div>div:nth-child(2)>div>div.card-body {
    overflow: auto;
}

body > div.wrapper > main > div > div:nth-child(1) > div.image-frame {
    overflow-x: hidden;
    /* Initially hide horizontal overflow on larger screens */
    width: 100%;
    /* Make the frame take the full width by default */
    /* You can set a fixed height if you want the frame to have a specific vertical size */
    /* height: 200px; */
}

body > div.wrapper > main > div > div:nth-child(1) > div.image-frame a {
    display: block;
    /* Ensure the link takes the full width of the frame */
}

body > div.wrapper > main > div > div:nth-child(1) > div.image-frame img {
    display: block;
    /* Prevent extra spacing below the image */
    max-width: none;
    /* Allow the image to be wider than the frame */
    height: auto;
    /* Maintain the image's aspect ratio */
}

/* Media query for screens with a maximum width of 768px (typical for tablets and smaller) */
@media (max-width: 768px) {
    body > div.wrapper > main > div > div:nth-child(1) > div.image-frame {
        overflow-x: auto;
        /* Enable horizontal scrolling on mobile */
        width: 90%;
        /* Adjust the width of the frame on mobile as needed */
        margin: 0 auto;
        /* Center the frame on mobile */
        /* You might want to set a specific height for the frame on mobile */
        /* height: 150px; */
    }

    /* You might need to adjust the image's initial width here if it's too large */
    body > div.wrapper > main > div > div:nth-child(1) > div.image-frame img {
        /* Example: Set an initial width for the image within the scrollable frame */
        /* width: 600px; */
    }
}