.mini-project {
    display: flex;
    flex-direction: column;
    width: 40em;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 1em;
    text-align: justify;
}

.mini-project .title {
    text-align: left;
    font-size: 2rem;
    color: #DB2553;
    font-weight: 700;
    margin-bottom:  0;
}

.mini-project .info-tags {
    justify-content: flex-start;
}

.mini-project .image-row {
    display: flex;
    flex-direction: row;
    gap: 2em;
    overflow-x: hidden;       /* hide scrollbar for mouse-follow scroll */
    max-height: 50vh;
    width: clamp(40em, 80vw, 90em);
    align-items: flex-start;
    cursor: ew-resize;
}

.image-row img {
    height: 30em;
    width: auto;
    display: block;
    object-fit: contain;
}

.image-row video {
    height: 30em;
    width: auto;
    display: block;
    object-fit: contain;
}


.image-row-wrapper {
    width: fit-content;
}

.scroll-indicator {
    width: 100%;
    height: 4px;
    background: rgba(255, 255, 255, 0.1);
    margin-top: 0.5em;
    position: relative;
    overflow: hidden;
}

.scroll-bar {
    height: 100%;
    width: 0%;
    background: #DB2553;
    transition: width 0.1s linear;
}