.yms-project-story__hero {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 100%;
    height: auto;
    max-height: min(540px, 60vh);
    aspect-ratio: unset;
    margin: 0 0 32px;
    padding: 16px;
    border-radius: 12px;
    background: #f4efea;
    box-shadow: 0 10px 30px rgba(28, 20, 14, 0.08);
    overflow: hidden;
}

.yms-project-story__hero .yms-project-picture {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 100%;
    height: 100%;
    max-height: min(508px, calc(60vh - 32px));
}

.yms-project-story__hero-image {
    display: block;
    width: auto;
    max-width: 100%;
    height: auto;
    max-height: min(508px, calc(60vh - 32px));
    object-fit: contain;
    border-radius: 8px;
    margin: 0 auto;
    padding: 0;
    background: transparent;
}

.yms-project-stage__item {
    display: flex;
    flex-direction: column;
    background: #eee9df;
}

.yms-project-stage__item .yms-project-picture {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    background: #eee9df;
}

.yms-project-stage__item img.yms-project-stage__image {
    display: block;
    width: 100%;
    height: 100%;
    padding: 8px;
    background: #eee9df;
    object-fit: contain;
}

.yms-project-stage__item video {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    background: #17120e;
    object-fit: contain;
}

.yms-project-stage__item figcaption {
    flex: 1 1 auto;
}

@media (max-width: 767px) {
    .yms-project-stage__grid {
        gap: 12px;
    }

    .yms-project-stage__item .yms-project-picture,
    .yms-project-stage__item video {
        aspect-ratio: 1 / 1;
    }

    .yms-project-stage__item img.yms-project-stage__image {
        padding: 6px;
    }
}