#slider {
    position: relative;
    display: flex;
    justify-content: center;
    width: var(--slider-width);
    min-height: 320px;
    height:min(100vw, 500px);
    background-color: var(--lighter-color);
}

.images {
    width: 100%;
    height: 100%;
    position: absolute;
    object-fit: cover;
    transition: opacity 0.7s ease-in-out;
    border-left: 50px;
    border-bottom: 200px;
}
.images.position {
    object-position: 80%;
}

.banner {
    position: absolute;
    width: fit-content;
    top: min(40vw, 40%);
    transform: translateY(-50%);
    left: 6%;
    z-index: 1;
    font-size: min(4vw, 26px);
    text-shadow: 1px 1px 20px black;
}

.shadow {
    position: absolute;
    width: 100%;
    height: 100%;
    box-shadow: inset 0px 60px 30px -30px rgba(0,0,0,0.7),
    inset 0px -60px 60px -30px rgba(0,0,0,0.9);
}

.home-image-container {
    position: relative;
    display: flex;
    background-color: var(--lighter-color);
}