:root {
    --scale-factor:1
}

body {
  font-family: Helvetica;
}

.hidden{
    opacity:0;
}

.image-card{
    border-top-left-radius:calc(var(--scale-factor)*60px);
    border-top-right-radius:calc(var(--scale-factor)*60px);
    background-color:black;
    overflow:hidden;
    position:absolute;
    top:0;
    left:0;
    transition: opacity 4s, height 2s;
}

.carousel-image{
    background-color:unset;
    z-index: -1;
    border-bottom-left-radius:calc(var(--scale-factor)*60px);
    border-bottom-right-radius:calc(var(--scale-factor)*60px);
}

.description-wrapper{
    display:flex;
    width:100%;
    justify-content: center;
    align-items: center;
}

.carousel-description{
    color:darkgray;
}

.carousel-title{
    font-size: calc(var(--scale-factor) * 48px);
    margin-bottom: calc(var(--scale-factor) * 10px);
    margin-top: calc(var(--scale-factor) * 10px);
    font-weight:600;
    color:white;
    display:flex;
}

.carousel-date{
    position:relative;
    height: calc(var(--scale-factor) * 36px);
    width:100%;
    margin-top: calc(var(--scale-factor) * -40px);
    font-size: calc(var(--scale-factor) * 28px);
    line-height: calc(var(--scale-factor) * 36px);
    vertical-align:center;
    background-color:rgba(0,0,0,0.7);
    color:white;
    z-index:1;
    border-bottom-left-radius:calc(var(--scale-factor) * 60px);
    border-bottom-right-radius:calc(var(--scale-factor) * 60px);
}