.meta-row-container {
    display: grid;
    grid-template-columns: 6fr minmax(12rem, 1fr);
    grid-template-areas:
        "title-area title-area"
        "message-area message-area"
        "meta-items-area see-all-area";
    overflow: visible;

    .title-container {
        grid-area: title-area;
        max-height: 2.4em;
        margin-bottom: 2rem;
        font-size: 1.5rem;
        color: var(--color-surfacelighter);
    }

    .message-container {
        grid-area: message-area;
        max-height: 3.6em;
        font-size: 1.3rem;
        color: var(--color-surfacelighter);
    }

    .meta-items-container {
        grid-area: meta-items-area;
        display: flex;
        flex-direction: row;
        align-items: stretch;
        overflow: visible;

        .meta-item {
            margin-right: 2rem;

            &.poster-shape-poster {
                flex: calc(1 / var(--poster-shape-ratio));
            }

            &.poster-shape-square {
                flex: 1;
            }

            &.poster-shape-landscape {
                flex: calc(1 / var(--landscape-shape-ratio));
            }
        }
    }

    .see-all-container {
        grid-area: see-all-area;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        padding: 1rem;
        background-color: var(--color-backgroundlight);

        &:hover, &:focus {
            outline-offset: 0;
            background-color: var(--color-backgroundlighter);
        }

        .label {
            flex-grow: 0;
            flex-shrink: 1;
            flex-basis: auto;
            max-height: 2.4em;
            font-size: 1.2rem;
            text-align: center;
            color: var(--color-surfacelighter);
        }

        .icon {
            flex: none;
            width: 1.3rem;
            height: 1.3rem;
            margin-left: 0.3rem;
            fill: var(--color-surfacelighter);
        }
    }
}