﻿.layout{position:relative}

.component{position:relative;text-align:center}
.component .component-title{font-size:18px;font-weight:600;letter-spacing:.25pt;margin-top:24px}
.component .component-content{font-size:14px;line-height:1.8;letter-spacing:.1pt;margin-top:24px;margin-bottom:24px}
.component .component-content li{list-style-position:inside}
.component .component-text{position:absolute;top:0;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:0 24px;overflow:auto}
.component .component-image{display:flex;justify-content:center}
.component .component-image img{max-width:100%}
.component .component-video{text-align:center}
.component .component-video iframe{max-width:100%}
.component .component-video.component-video-responsive{width:100%;max-width:100%;overflow:hidden}
.component .component-video.component-video-responsive iframe{width:100%;height:auto;aspect-ratio: 16 / 9}

.component .component-title:empty{display:none}
.component .component-content:empty{display:none}
.component .component-image:empty{display:none}
.component .component-title:not(:empty) + .component-image{margin-top:24px}
.component:first-of-type>.component-title{margin-top:0}
.component:first-of-type.bg>.component-title{margin-top:24px}
.component:first-of-type>.component-title:empty + .component-content{margin-top:0}
.component:first-of-type.bg>.component-title:empty + .component-content{margin-top:24px}
.component.bg .component-content{margin-bottom:0}

.component + .layout-content{margin-top:24px}
.layout-content + .component{margin-top:24px}

@media only screen and (max-width:760px),(min-device-width:168px) and (max-device-width:1024px)
{
    .component .component-text{justify-content:flex-start}
}