{{- $id := .id }}
{{- $config := index site.Data.sections $id }}

{{- $height := cond (ne $config.height nil) $config.height 100 }}
{{- $shadow := $config.shadow | default false }}
{{- $shadowOpacity := $config.shadowOpacity | default 0.4 }}
{{- $centeredContainerWidth := sub 100 (cond (ne $config.padding nil) $config.padding 30) }}
{{- $fontColor := $config.fontColor | default "inherit" }}
{{- $containerLocation := $config.container.location | default "center" }}
{{- $containerMarginLeft := cond (ne $config.container.margins.left nil) $config.container.margins.left 0 }}
{{- $containerMarginRight := cond (ne $config.container.margins.right nil) $config.container.margins.right 0 }}
{{- $containerMarginTop := cond (ne $config.container.margins.top nil) $config.container.margins.top 50 }}
{{- $containerMarginBottom := cond (ne $config.container.margins.bottom nil) $config.container.margins.bottom 50 }}
{{- $containerMarginUnit := cond $config.container.margins.usePercentage "%" "px" }}
{{- $zIndex := cond (ne $config.zIndex nil) $config.zIndex "auto" -}}

#{{ $id }} {
    color: {{ $fontColor }};
    width: 100%;
    min-height: {{ $height }}vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: {{ $containerLocation }};
    position: relative;
    background-size: cover;
    box-shadow: {{ cond $shadow ((printf "0px 0px 64px 24px rgba(0, 0, 0, %f)" $shadowOpacity) | safeCSS) "none" }};
    z-index: {{ $zIndex | safeCSS }};
}

#{{ $id }}-centered-container {
    width: {{ $centeredContainerWidth }}%;
    display: flex;
    flex-direction: column;
    align-items: center;
    z-index: 10;
    margin-left: {{ $containerMarginLeft }}{{ $containerMarginUnit }};
    margin-right: {{ $containerMarginRight }}{{ $containerMarginUnit }};
    margin-top: {{ $containerMarginTop }}{{ $containerMarginUnit }};
    margin-bottom: {{ $containerMarginBottom }}{{ $containerMarginUnit }};
}

@media (max-width: 1000px) {
    #{{ $id }}-centered-container {
        width: {{ add $centeredContainerWidth 20 }}%;
    }
}