.container {
    font-family: sans-serif;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 5px;
    gap: 20px;
}

/* Viewport: clips the 200vw inner track */
.panel-viewport {
    width: 100vw;
    overflow: hidden;
    position: relative;
}

/* The 200vw track containing both columns */
.panel-track {
    display: flex;
    width: 200vw;
    transition: transform 0.45s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    will-change: transform;
    user-select: none;
}

.panel-track.dragging {
    transition: none;
}

.flip-card {
    background-color: transparent;
    perspective: 1000px;
    height: 60vh;
    width:100%;
    margin:1.35em 0.25em;
    border-radius: 8px;
}

.flip-card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    text-align: center;
    transition: transform 0.6s;
    transform-style: preserve-3d;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
    border-radius: 8px;
}

.flip-card:hover .flip-card-inner {
    transform: rotateY(180deg);
}

.flip-card-front,
.flip-card-back {
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    border-radius:8px;
}

.flip-card-front video, .flip-card-front img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
    border-radius:8px;
}

.flip-card-back {
    transform: rotateY(180deg);
}

.flip-card-back > div {
    padding: 0 1em;
    font-size: smaller;
}
.video-caption,
.image-caption {
    height: 100%;
    z-index: 1;
    position: absolute;
    top: 0;
    width: -webkit-fill-available;
    text-align: center;
    color: var(--secondary-text);
    padding: 0px 10px;
    display: flex;
    justify-content: end;
    align-items: center;
    flex-direction: column;
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.35);
}

.col {
    display: inline-block;
    height: auto;
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.col .media-mask {
    height: 100%;
    flex: 1;
}

.col-left {
    width: 58%;
    margin-left: 10px;
}

.flipped>.col-left {
    width: 42%;
    gap: 12px;
    padding: 24px;
}

/*TODO add correct text alignment*/
/*TODO resolve problem with image dimensions when there is too much text*/
.col-right {
    width: 42%;
    gap: 12px;
    padding: 24px;
    margin-right: 10px;
}

.flipped>.col-right {
    width: 58%;
    gap: 0px;
    padding: 0px;
}

.title {
    position: absolute;
    color: #fff;
}

.col-left .title {
    top: 50%;
    left: 25%;
    transform: translate(-50%, -50%);
}

.col-right .title {
    top: 50%;
    right: 25%;
    transform: translate(50%, -50%);
}

/* Hint arrow swipe left*/
.swipe-hint {
    position: absolute;
    bottom: 14px;
    left: 20px;
    background: rgba(255, 255, 255, 0.25);
    color: white;
    border-radius: 10px;
    padding: 0px 15px;
    font-size: 1.2rem;
    pointer-events: none;
    backdrop-filter: blur(4px);
    transition: opacity 0.4s;
}

.swipe-hint.flipped {
    left: auto;
    right: 20px;
}

/* Diagonal mask 20% for right-side media */
.diag-mask-20.flipped {
    clip-path: polygon(20% 0,
            100% 0,
            100% 100%,
            0% 100%);
}

/* Flipped diagonal for left-side media */
.diag-mask-20 {
    clip-path: polygon(0 0,
            100% 0,
            80% 100%,
            0% 100%);
}

/* Diagonal mask 30% for right-side media */
.diag-mask-30.flipped {
    clip-path: polygon(30% 0,
            100% 0,
            100% 100%,
            0% 100%);
}

/* Flipped diagonal for left-side media */
.diag-mask-30 {
    clip-path: polygon(0 0,
            100% 0,
            70% 100%,
            0% 100%);
}

/* Diagonal mask 40% for right-side media */
.diag-mask-40.flipped {
    clip-path: polygon(40% 0,
            100% 0,
            100% 100%,
            0% 100%);
}

/* Flipped diagonal for left-side media */
.diag-mask-40 {
    clip-path: polygon(0 0,
            100% 0,
            60% 100%,
            0% 100%);
}