#safety-and-security-header {
    height: 30vw;
    width: 100vw;
    background-image: url("https://static.igem.wiki/teams/5437/project-headers/safety-and-security-header/safety-and-security.jpeg");
    background-size: cover;
    background-repeat: no-repeat;
    background-position-y: 40%;
    box-shadow:0 0 80px 80px #F6F1DA inset;
}

[data-component="slideshow"] .slide {
    display: none;
    text-align: center;
}

[data-component="slideshow"] .slide.active {
	display: block;
}

.image-container{
    background-color: var(--image-bg-color);
    margin-top: 6.5vh;
    margin-bottom: 6.5vh;
    margin-right: 26vh;
    margin-left: 10.5vh;
    width: 910px;
    height: 600px;
    border-radius: 20px;
}

.list {
    display: flex;
    gap: 8px;
    padding: 16px;

    list-style: none;
    overflow-x: scroll;
    scroll-snap-type: x mandatory;
    /* Hide scrollbar in Firefox */
    scrollbar-width: none;

    /* Hide scrollbar in IE and Edge */
    -ms-overflow-style: none;
}

.list::-webkit-scrollbar {
    display: none;
}

a {
    color: #587448 !important;
}

.item1 {
    flex-shrink: 0;
    width: 80%;
    height: 70%;

    background-color: #FFF;

    scroll-snap-align: center;
}

.item2 {
    flex-shrink: 0;
    width: 30vw;
    height: auto;

    background-color: #FFF;

    scroll-snap-align: center;
}
.caption {
    text-align: center; /* Center the caption */
    margin-top: 10px;
    font-size: 16px;
    color: #555; /* Caption color */
}

.content {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;

    font-family: sans-serif;
    font-size: 64px;
    font-weight: bold;
}

.safetypic {
    width:100%;
    
}

.list-wrapper {
    position: relative;
}

.button {
    position: absolute;
    top: 50%;
    width: 3rem;
    height: 3rem;

    transform: translateY(-50%);
}

.button--previous {
    left: 1.5rem;

    transform: rotate(180deg);
}

.button--next {
    right: 1.5rem;
}