.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;
}

.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%);
}