.polaroid {
    aspect-ratio: 35 / 42;
    background-color: #FCEDC2;
    margin: 20px;

    container-type: size;
    container-name: polaroid;

    font: "Cambria Regular";
}

@container polaroid {
    .polaroid-image-container {
        aspect-ratio: 1 / 1;
        padding-top: 5cqw;
        padding-left: 5cqw;
        padding-right: 5cqw;
    }

    .polaroid-image-container img {
        width: 100%;
        height: 100%;
        background-color: #000000;

        object-fit: contain;
    }
}

@container polaroid {
    .polaroid-title-container {
        height: calc(100cqh - 100cqw + 5cqw);
        padding-left: calc(1.5cqw);
        padding-right: calc(1.5cqw);

        display: flex;
        justify-content: center;
        align-items: center;
    }
    .polaroid-title-container p {
        text-align: center;
        margin: 0;
    }
}

@container polaroid {
    .polaroid-desc-container {
        display: none;
        padding: 0.75cqw;
    }
}

#camera-preview-view {
    display: block;
}

#camera-expanded-view {
    display: none;

    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;

    justify-content: center;
    align-items: center;
}

#camera-detailed-view {
    display: none;
}

#polaroid-playback {
    display: flex;
    /* Show the flex items horizontally */
    flex-direction: row;

    position: absolute;
    top: 0;
    bottom: 0;
}

#polaroid-playback div {
}