.innerContainer
{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    align-self: stretch;

    padding: var(--layout-body-spacing);
    gap: calc(var(--layout-body-spacing) * 2);
}

.innerContainer.announcements
{
    gap: calc(var(--layout-gap) * 5);
}
.frameOverview, .frameHighlight, .linkButton, .frameImage:not(.frameImage_frame .frameImage), .featureEntry, .frameEditionContainer-parent, .frameEditionContainer, .editions-row, .frameImage_frame
{
    animation: appear linear;
    animation-timeline: view();
    animation-range: entry 0% cover var(--animation-appear-cover);
}

.frameFeatures, .textElement, .featureRow, .announcementPostIcon, .frameTextParagraph, .frameTextRow, .frameTextTag
{
    animation: appear linear;
    animation-timeline: view();
    animation-range: entry 0% cover calc(var(--animation-appear-cover) / 2);
}

.frameOverview
{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    align-self: stretch;   
    
    gap: calc(5 * var(--layout-gap));
}

.frameHighlight, .frameTextContainer
{
    display: flex;
    flex-direction: column;
    align-items: center;
    align-self: stretch;
    
    padding: 0 var(--layout-body-spacing-inner);
    gap: calc(var(--layout-gap) * 4);
}

.frameTextContainer
{
    gap: calc(var(--layout-gap) * 2);
    align-items: start;
}
.frameTextContainer > .textElement
{
    width: 100%;
}

.frameTextParagraph.fullWidth
{
    width: 100%;
}

.frameTextParagraph > .textElement
{
    line-height: 160%;
}
.frameParagraphSpacing
{
    width: 100%;
}
.textElement.indention
{
    padding-left: calc(2 * var(--layout-gap));
}
.textElement.indentionHalf
{
    padding-left: calc(1 * var(--layout-gap));
}

.frameTextParagraphSpacing
{
    width: 100%;
    height: var(--layout-gap);
}
.frameTextParagraphSpacingHalf
{
    width: 100%;
    height: calc(var(--layout-gap) / 2 );
}
.frameTextParagraphSpacingDouble
{
    width: 100%;
    height: calc(var(--layout-gap) * 2);
}

.frameTextParagraph-ImageGrid
{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-column-gap: var(--layout-gap);
    grid-row-gap: var(--layout-gap);

    height: fit-content;
}
.frameTextParagraph-ImageGrid.padding
{
    padding: var(--layout-gap);
}

.frameTextParagraph-ImageGrid.roadPresetPreview
{    
    grid-template-columns: repeat(var(--layout-grid-images-roadPresetsPreview), 1fr);
}

.frameFeatures
{
    display: flex;
    flex-direction: column;
    align-items: center;
    align-self: stretch;

    gap: calc(var(--layout-gap) * 4);
}

.frameLabelContainer
{
    display: flex;
    width: 100%;
    height: 100%;
    gap: calc(var(--layout-gap) * 3);

    flex-direction: column;
    justify-content: first baseline;
    align-items: flex-start;
}
elements-linktree-rpfmvr, elements-linktree-rpfmvr.linkTree, elements-linktree-mms
{
    display: flex;
    flex-direction: column;
    justify-content: center;

    width: 100%;
    height: fit-content;
    gap: var(--layout-gap);
}
elements-linktree-rpfmvr.mobileLinkTree
{
    flex-direction: column;
}
elements-linktree-rpfmvr.linkTree > .frameLinkContainer
{
    justify-content: center;
    width: 100%;
}

.frameLinkContainer.scaleEven
{
     display: flex;
     width: 100%;
}
.frameLinkContainer.scaleEven .linkButton { flex: 1; }

.linkTree.grouped
{
    padding: var(--layout-gap);
    margin: var(--layout-gap) 0px;
    border-radius: var(--layout-border-radius);
    border: 1px solid var(--color-background-border-II);

    display: flex;
    gap: var(--layout-gap);
    flex-direction: column;
}

.frameLinkContainer.alignCenter
{
    height: 100%;
}
.frameOverview > .frameLabelContainer
{
    max-width: var(--layout-frames-overview-labels-maxWidth);
}
.frameOverview.extendWidth > .frameLabelWhite.textElement.headerLarge
{
    text-align: center;
    width: 100%;
}

/* editions section */

.frameEditionContainer-parent
{
    width: 100%;
    height: fit-content;

    display: flex;
    flex-direction: column;
    align-self: stretch;
    
    padding: var(--layout-gap);

    background: var(--color-background-secondary-II);
    border-radius: var(--layout-border-radius);
    border: 1px solid var(--color-background-border-II);
}

.frameEditionContainer
{
    flex: 1 0 0;

    display: flex;
    flex-direction: column;
    align-items: center;
    align-self: stretch;

    padding: var(--layout-gap);
    gap: var(--layout-gap);
}

.editions-row
{
    width: 100%;
    display: flex;
    height: calc(2.5 * var(--layout-gap));
    align-items: stretch;

    padding-bottom: var(--layout-gap);
    gap: var(--layout-gap);
    
    border-bottom: 1px solid var(--color-background-border-II);
}
.editions-row .editions-column:not(:first-child)
{
    border-left: 1px solid var(--color-background-border-II);
}

.editions-column
{
    display: flex;
    height: 100%;

    align-items: center;
    align-self: stretch;
    flex: 1 0 0;

    padding: 0 var(--layout-gap);
    gap: var(--layout-gap);
}
.editions-column.feature
{
    min-width: 30%;
}

.editions-icon
{
    height: 100%;
    aspect-ratio: 1/1;

    display: flex;
    justify-content: center;
    align-items: center;

    background: var(--color-background-secondary);
    border-radius: calc(1.5 * var(--layout-border-radius));
}
.editions-icon img
{
    height: calc(100% - 1 * var(--layout-padding));
    aspect-ratio: 1/1;
}

.editions-text:not(.editions-tag .editions-text)
{
    flex: 1 0 0;
}

.editions-tag
{
    height: 100%;
    width: fit-content;

    display: flex;
    justify-content: center;
    align-items: center;

    background: var(--color-background-secondary);
    border-radius: calc(1.5 * var(--layout-border-radius));

    padding: 0 var(--layout-padding);
}

/* editions section */

elements-framelabelgrouprow-roadsystem, .elements-framelabelgrouprow
{
    width: 100%;
    display: flex;
    flex-direction: row;

    justify-content: space-between;
}

.frameLabelGroup
{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    align-self: stretch;

    gap: var(--layout-gap);
}
.frameLabelGroup.alignCenter
{
    height: 100%;
    width: 100%;
    justify-content: center;
    align-items: center;
}

.frameLabelGroup.alignTextRight > .frameLabelWhite.textElement.header
{
    width: 100%;
    text-align: right;
}

.frameLabelGroup.flexRow { flex-direction: row; }

.frameButton
{
    width: fit-content;
    max-height: calc(100% - 2 * var(--layout-gap));
    aspect-ratio: 1/1;

    padding: var(--layout-gap);

    background: var(--color-background-primary);
    border-radius: var(--layout-border-radius);
}
.frameButton:hover
{
    transform: scale(var(--animation-scale-adjust));
    transition: transform 0.4s ease;

    cursor: pointer;
}

.frameSpacing
{
    height: var(--layout-border-height);
    align-self: stretch;

    border-radius: calc(var(--layout-border-radius) / 2);
    background: var(--color-background-border);
}
.frameSpacing.gap
{
    margin: var(--layout-gap) 0px;
}

.frameLinkContainer-parent
{
    width: 100%;
    
    display: flex;
    justify-content: center;
    align-items: center;
    align-self: stretch;

    gap: var(--layout-gap);
}

.frameLinkContainer
{
    display: flex;
    height: var(--layout-frames-linkContainer-height);
    width: 100%;
    
    gap: var(--layout-gap);

    align-items: flex-start;
    flex-shrink: 0;
    align-self: stretch;
}

.linkButton
{
    display: flex;
    align-items: center;
    align-self: stretch;

    width: fit-content;
    padding: var(--layout-gap);
    gap: var(--layout-gap);

    border: 1px solid var(--color-background-border);
    border-radius: calc(var(--layout-border-radius) * 2);
    background: var(--color-background-secondary-II);
}
.linkButton.extension, .linkButton.extended
{
    border-radius: var(--layout-border-radius);
    width: calc(var(--layout-frames-linkContainer-elem-width));
}
.linkButton.extended
{
    width: 180px;
}

.linkButton.icon
{
    width: fit-content;
}
.linkButton:hover
{
    transform: scale(var(--animation-scale-adjust));
    transition: transform 0.4s ease;

    cursor: pointer;
}
.linkButton.extended:hover
{
    transform: scale(var(--animation-scale-adjust-small));
}
.linkButton:hover, .linkButton.selected
{
    border: 1px solid var(--color-assets-DynamicRoads1);
}

.linkButton.important { background: var(--color-purple); }
.linkButton.important.alternative { background: var(--color-red-dark); }

.linkButton.RPMVR1 { background: var(--color-assets-RoadPresetsMVR1); }
.linkButton.RPMVR2 { background: var(--color-assets-RoadPresetsMVR2); }
.linkButton.RPMVR3 { background: var(--color-assets-RoadPresetsMVR3); }
.linkButton.RPMVR4 { background: var(--color-assets-RoadPresetsMVR4); }
.linkButton.DR1 { background: var(--color-assets-DynamicRoads1); }
.linkButton.DR2 { background: var(--color-assets-DynamicRoads2); }

.linkButton.DT1 { background: var(--color-assets-DynamicTraffic1); }
.linkButton.DT2 { background: var(--color-assets-DynamicTraffic2); }


.linkButtonIcon
{
    height: 100%;
    aspect-ratio: 1/1;
}
.linkButtonIcon.premiumIcon
{
    max-height: calc(var(--layout-frames-featureEntry-row-height) * 0.8);
}

.linkButtonLabelArea
{
    height: 100%;
    width: 100%;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    align-self: stretch;
    flex: 1 0 0;
}

.linkButtonLabel
{
    width: 100%;
    text-align: left;
}
.linkButtonLabel.infoLarge
{
    font-weight: 600;
}

.frameImage_frame
{
    height: calc(100% - 2 * var(--layout-gap));
    max-width: calc(100% - 2 * var(--layout-gap));

    padding: var(--layout-gap);

    background: var(--color-background-primary);
    border: 1px solid var(--color-background-border-II);

    border-radius: calc(2 * var(--layout-border-radius));
}
.frameImage_frame.hasLink:hover
{
    cursor: pointer;
}

.frameImage
{
    height: 100%;
    max-width: 100%;
    aspect-ratio: 16/9;

    border-radius: calc(2 * var(--layout-border-radius));
}
.frameImage:not(.frameImage_frame .frameImage):hover, .frameImage_frame:hover
{
    transform: scale(var(--animation-scale-adjust-small));
    transition: transform 0.4s ease;
}

.frameImage.noZoom:hover, .frameImage.noZoom .frameImage:hover, 
.frameImage_frame.noZoom:hover, .frameImage_frame.noZoom .frameImage_frame:hover { transform: none !important; }

.frameImage.widthBased
{
    height: auto;
    width: 100%;
    aspect-ratio: 16/9;

    border-radius: calc(2 * var(--layout-border-radius));
}
.frameImage.square
{
    aspect-ratio: 1/1;
}
.frameImage.autoHeight
{
    aspect-ratio: auto;
}

.frameImage_frame .frameImage
{
    border-radius: calc(1.5 * var(--layout-border-radius));
}


.frameImage.overview
{
    max-height: var(--layout-frames-overview-height);
}
.frameImage.announcement-image
{
    background: var(--color-text-primary);
}

.frameFeaturesGrid
{
    width: 100%;

    display: grid;
    grid-template-columns: repeat(var(--layout-grid-features-large), 1fr);
    grid-column-gap: calc(var(--layout-gap) * 2);
    grid-row-gap: calc(var(--layout-gap) * 2);
}
.frameFeaturesGrid.features
{
    grid-template-columns: repeat(var(--layout-grid-features), 1fr);
}
.frameFeaturesGrid.extensions
{
    grid-template-columns: repeat(var(--layout-grid-features-extensions), 1fr);
}
.frameFeaturesGrid.announcements
{
    grid-template-columns: repeat(var(--layout-grid-announcements), 1fr);
}

.featureEntryHeader
{
    grid-column: 1 / -1;
}

.featureEntry
{
    display: flex;
    padding: calc(var(--layout-gap) * 2);

    flex-direction: column;
    align-items: flex-start;
    gap: var(--layout-gap);

    border-radius: calc(2 * var(--layout-border-radius));
    border: 1px solid var(--color-background-border);
    background: var(--color-background-secondary-II);
}
.featureEntry.expandHeight
{
    height: fit-content;
}
.featureEntry:hover
{
    transform: scale(var(--animation-scale-adjust-small));
    transition: transform 0.4s ease;

    border: 1px solid var(--color-assets-DynamicRoads1);
}

.featureRow
{
    display: flex;
    align-items: flex-start;
    align-self: stretch;
    justify-content: space-between;

    width: 100%;
    height: var(--layout-frames-featureEntry-row-height);
    gap: var(--layout-gap);
}
.featureRow.spacing
{
    height: calc(var(--layout-frames-featureEntry-row-height) * 0.8);
    justify-content: space-between;
}
.featureRow.spacing.expandHeight
{
    min-height: calc(var(--layout-frames-featureEntry-row-height) * 0.8);
    height: fit-content;
}

/* development progress container */

.frameDevelopmentProgressContainer
{
    width: calc(100% - 2 * var(--layout-gap));
    height: fit-content;

    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto;

    gap: calc(1 * var(--layout-gap));
    padding: var(--layout-gap);

    background: var(--color-background-secondary-II);

    border: 1px solid var(--color-background-border-II);
    border-radius: calc(2 * var(--layout-border-radius));
}

elements-mms-progress, .developmentProgressEntry
{
    width: 100%;

    display: flex;
    flex-direction: row;
    justify-content: space-between;
}
.developmentProgressBar
{
    width: 60%;

    border-radius: calc(1 * var(--layout-border-radius));    
    background: var(--color-background-primary);
}
.developmentProgressBar .frameLabelWhite
{
    height: 100%;
}

.developmentProgressBarLabel
{
    height: 100%;
    transform: translateY(-100%);
}

.developmentProgressBar.fill
{
    height: 100%;
    background: var(--color-purple);
}

.multiElementGrid
{
    width: calc(100% - 2 * var(--layout-gap));
    height: fit-content;

    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto;

    gap: calc(2 * var(--layout-gap));
    padding: var(--layout-gap);
}

.multiElementGridEntry
{    
    background: var(--color-background-secondary-II);

    border: 1px solid var(--color-background-border-II);
    border-radius: calc(2 * var(--layout-border-radius));

    width: calc(100% - 2 * var(--layout-gap));
    min-height: calc(4 * var(--layout-gap));
    
    height: fit-content;
    display: flex;
    flex-direction: column;

    display: flex;
    gap: var(--layout-gap);
    padding: var(--layout-gap);
}


.featureEdition
{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-self: stretch;

    width: fit-content;
    text-align: center;

    padding: var(--layout-padding);
    gap: var(--layout-padding);

    border-radius: calc(var(--layout-border-radius));

    text-transform: uppercase;
}
.featureEdition.minWidth
{
    min-width: calc(var(--layout-gap) * 1.5);
}

.featureLabelDescription
{
    color: var(--color-text-secondary-alt);

    height: 100%;
    flex: 1;
}

.featureEntry.coreEdition > .featureRow > .featureIcon 
{
    filter: var(--filter-assets-DynamicRoads1);
}
.featureEntry.extensionEdition > .featureRow > .featureIcon 
{
    filter: var(--filter-assets-RoadPresetsMVR4);
}

.featureEntry.coreEdition > .featureRow > .featureEdition,
.featureEntry.coreEdition > .featureTechnicalInfo > .featureRow > .featureEdition
{
    background: var(--color-assets-DynamicRoads1);
}
.featureEntry.extensionEdition > .featureRow > .featureEdition ,
.featureEntry.extensionEdition > .featureTechnicalInfo > .featureRow > .featureEdition
{
    background: var(--color-assets-RoadPresetsMVR4);
}

.featureEntry.coreEdition > .featureRow > .featureEdition.update,
.featureEntry.coreEdition > .featureTechnicalInfo > .featureRow > .featureEdition.update,
.featureEdition.update
{
    background: var(--color-assets-RoadPresetsMVR1);
}

.featureEntry.coreEdition > .featureRow > .featureEdition.new,
.featureEntry.coreEdition > .featureTechnicalInfo > .featureRow > .featureEdition.new
{
    background: var(--color-assets-DynamicTraffic1);
}

.featureEntry.coreEdition > .featureRow > .featureEdition.soon,
.featureEntry.coreEdition > .featureTechnicalInfo > .featureRow > .featureEdition.soon
{
    background: var(--color-red-light);
}

.featureEntry.coreEdition > .featureRow > .featureLabelheader.version
{
    color: var(--color-assets-DynamicRoads1);
}
.featureEntry.extensionEdition > .featureRow > .featureLabelheader.version
{
    color: var(--color-assets-RoadPresetsMVR4);
}
.featureEntry > .featureRow > .featureLabelheader.version 
{
    text-transform: uppercase;
}

/* announcement tags */
.featureEntry.update > .featureRow > .featureEdition.tag
{
    background: var(--color-assets-DynamicTraffic1);
}
.featureEntry.changelog > .featureRow > .featureEdition.tag
{
    background: var(--color-assets-RoadPresetsMVR4);
}
.featureEntry > .featureRow > .featureEdition.versionTag.alpha
{
    background: var(--color-red-dark);
}
.featureEntry > .featureRow > .featureEdition.versionTag.beta
{
    background: var(--color-red-light);
}

.featureEntry.update > .featureRow > .featureIcon 
{
    filter: var(--filter-assets-DynamicTraffic1);
}
.featureEntry.changelog > .featureRow > .featureIcon 
{
    filter: var(--filter-assets-RoadPresetsMVR4);
}


.featureTechnicalInfo
{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    align-self: stretch;

    width: 100%;
    gap: calc(var(--layout-gap) / 2);
}

.announcementPostInfo
{
    display: flex;
    align-items: flex-start;
    align-self: stretch;

    height: var(--layout-frames-postInfo-row-height);
    gap: var(--layout-gap);
}

.announcementPostIcon
{
    height: calc(100% - 2 * var(--layout-padding));
    aspect-ratio: 1/1;

    padding: var(--layout-padding);

    border-radius: calc(2 * var(--layout-border-radius));
    background: var(--color-background-secondary);
}

.announcementPostLabels
{
    height: calc(100% - 2 * var(--layout-padding));
    width: 100%;
    
    padding: var(--layout-padding) 0px;
    
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: stretch;
    flex: 1 0 0;
}
.announcementPostLabels .infoSmall
{
    color: var(--color-text-secondary-alt);
}

.announcementPostInfo:hover
{
    transform: scale(var(--animation-scale-adjust-small));
    transition: transform 0.4s ease;
}

.frameTextRow
{
    display: flex;
    align-items: flex-start;
    align-self: stretch;

    width: calc(100% - 2 * var(--layout-padding));
    height: calc(0.9 * var(--layout-frames-postInfo-row-height));

    gap: var(--layout-gap);
    padding: var(--layout-padding);
}
.frameTextRow.box, .frameTextParagraph.box
{
    background: var(--color-background-primary) !important;
    
    width: calc(100% - 2 * (var(--layout-padding) + var(--layout-padding))) !important;
    margin: var(--layout-padding) !important;

    border-radius: calc(1 * var(--layout-border-radius)) !important;
}

.frameTextTag
{
    display: flex;
    justify-content: center;
    align-items: center;

    width: fit-content;
    height: calc(100% - 2 * var(--layout-padding));
    padding: var(--layout-padding);
    
    gap: var(--layout-gap);

    border-radius: calc(1 * var(--layout-border-radius));
}

.hightlightBackground.DR1, .frameTextTag.DR1 { background: var(--color-assets-DynamicRoads1); }
.hightlightBackground.DR2, .frameTextTag.DR2 { background: var(--color-assets-DynamicRoads2); }
.hightlightBackground.RPMVR1, .frameTextTag.RPMVR1 { background: var(--color-assets-RoadPresetsMVR1); }
.hightlightBackground.RPMVR2, .frameTextTag.RPMVR2 { background: var(--color-assets-RoadPresetsMVR2); }
.hightlightBackground.RPMVR3, .frameTextTag.RPMVR3 { background: var(--color-assets-RoadPresetsMVR3); }
.hightlightBackground.RPMVR4, .frameTextTag.RPMVR4 { background: var(--color-assets-RoadPresetsMVR4); }
.hightlightBackground.DT1, .frameTextTag.DT1 { background: var(--color-assets-DynamicTraffic1); }
.hightlightBackground.DT2, .frameTextTag.DT2 { background: var(--color-assets-DynamicTraffic2); }

.hightlightBackground.redDark, .frameTextTag.redDark { background: var(--color-red-dark); }
.hightlightBackground.redLight, .frameTextTag.redLight { background: var(--color-red-light); }

.hightlightBackground.gray, .frameTextTag.gray { background: var(--color-background-border-II); }

.frameTextTag.smaller
{
    padding: calc(var(--layout-padding) / 2) calc(var(--layout-padding) * 2);
    margin: var(--layout-padding) 0px;
}

.frameTextParagraphSpacingFlex
{
    height: 100%;
    flex: 1 0 0;
}

.frameTextParagraph.border
{
    border: 1px solid var(--color-background-border-II);
    border-radius: calc(1 * var(--layout-border-radius));

    padding: var(--layout-padding);
}

.roadmapContent
{
    display: flex;
    flex-direction: column;

    width: 100%;

    height: fit-content;

    gap: calc(var(--layout-gap) * 1);
}