.edgetoedgeimage {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.edgetoedgeimage .edgetoedgeimage__overlay {
    display: flex;
    flex-direction: column;
    position: relative;
    z-index: 1;
}

.edgetoedgeimage .edgetoedgeimage__overlay .box.box--default {
    background-color: var(--tMediaOverlayColorContrast0);
    color: var(--tMediaOverlayColorContrast100);
    --tColorContrast0: var(--tMediaOverlayColorContrast1);
    --tColorContrast1: var(--tMediaOverlayColorContrast1);
    --tColorContrast20: var(--tMediaOverlayColorContrast20);
    --tColorContrast60: var(--tMediaOverlayColorContrast60);
    --tColorContrast80: var(--tMediaOverlayColorContrast80);
    --tColorContrast100: var(--tMediaOverlayColorContrast100);
    --tLinkColor: var(--tMediaOverlayColorContrast80);
    --tLinkHoverColor: var(--tMediaOverlayColorContrast100);

    --tButtonPrimaryBgColor: var(--tMediaOverlayColorContrast100);
    --tButtonPrimaryFgColor: var(--tMediaOverlayColorContrast1);
    --tButtonPrimaryHoverBgColor: var(--tMediaOverlayColorContrast20);
    --tButtonPrimaryHoverFgColor: var(--tMediaOverlayColorContrast100);

    --tButtonDefaultBgColor: var(--tMediaOverlayColorContrast80);
    --tButtonDefaultFgColor: var(--tMediaOverlayColorContrast1);
    --tButtonDefaultHoverBgColor: var(--tMediaOverlayColorContrast20);
    --tButtonDefaultHoverFgColor: var(--tMediaOverlayColorContrast100);
}

.edgetoedgeimage .edgetoedgeimage__content {
    padding-top: var(--tVspacingMedium);
    padding-bottom: var(--tVspacingMedium);
}

.edgetoedgeimage .edgetoedgeimage__image {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
}

.edgetoedgeimage.edgetoedgeimage--default {
    min-height: 40vh;
}

.edgetoedgeimage.edgetoedgeimage--keepaspect .edgetoedgeimage__image {
    position: inherit;
    height: auto;
    object-fit: contain;
}

.edgetoedgeimage.edgetoedgeimage--large {
    min-height: 75vh;
}

.edgetoedgeimage.edgetoedgeimage--fill-view-height {
    min-height: 100vh;
}
.edgetoedgeimage.edgetoedgeimage--fill-view-height.edgetoedgeimage--page-cover {
    min-height: calc(100vh - var(--tHeaderHeight));
}

.edgetoedgeimage.edgetoedgeimage--wide-container-vertical-top .edgetoedgeimage__content {
    max-width: var(--tContainerWidthWide);
    margin: 0 auto;
    padding: 0 var(--tContainerSidePadding);
    /* We only add margin when top aligned because components have bottom spacing built in, but when top aligned we get no spacing at the top. */
    padding-top: var(--tVspacingMedium);
}
.edgetoedgeimage.edgetoedgeimage--wide-container-vertical-top .edgetoedgeimage__overlay {
    flex: 1 0 auto;
    width: 100%;
    height: 100%;
    justify-content: flex-start;
}

.edgetoedgeimage.edgetoedgeimage--wide-container-vertical-center .edgetoedgeimage__content {
    max-width: var(--tContainerWidthWide);
    margin: 0 auto;
    padding: 0 var(--tContainerSidePadding);
}
.edgetoedgeimage.edgetoedgeimage--wide-container-vertical-center .edgetoedgeimage__overlay {
    flex: 1 0 auto;
    width: 100%;
    height: 100%;
    justify-content: center;
}

.edgetoedgeimage.edgetoedgeimage--wide-container-vertical-bottom  .edgetoedgeimage__content {
    max-width: var(--tContainerWidthWide);
    margin: 0 auto;
    padding: 0 var(--tContainerSidePadding);
}
.edgetoedgeimage.edgetoedgeimage--wide-container-vertical-bottom  .edgetoedgeimage__overlay {
    flex: 1 0 auto;
    width: 100%;
    height: 100%;
    justify-content: flex-end;
}