@anoki/fse-ui/dist/components/ui/AuthorWithImage/AuthorWithImage.css

FSE UI components library

.author-with-image-container-preview{container-type:inline-size}.support-banner-service{max-width:898px}.action-author{display:flex;flex-direction:column;justify-content:center;align-content:center;gap:24px;padding:24px 0}@media (min-width: 992px){.action-author{flex-direction:row;justify-content:space-between;align-items:flex-end;padding-right:56px}}@media (max-width: 992px){.action-link{margin:auto}}@container (min-width: 992px){.author-with-image-container-preview .action-author{flex-direction:row;justify-content:space-between;align-items:flex-end;padding-right:56px}}@container (max-width: 992px){.author-with-image-container-preview .action-link{margin:auto}}.share-divider{border-left:1px solid;padding-left:8px;border-color:var(--border-divider)}.fullscreen-image-container,.service-detail-image{position:relative;aspect-ratio:21/9}.fullscreen-image-container img,.service-detail-image img{width:100%;height:100%;object-fit:cover}.fullscreen-image-container:after,.service-detail-image:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(180deg,#00408000,#00408099);z-index:1}.fullscreen-image-container .short-title,.service-detail-image .short-title{position:absolute;bottom:20px;left:20px;z-index:2;color:#fff;font-size:24px;margin:0;font-weight:600;display:flex;flex-direction:column;gap:10px}.fullscreen-image-container .short-title>span,.service-detail-image .short-title>span{display:inline-block;background-color:var(--slate-28);color:inherit;padding:4px;width:fit-content}@media (min-width: 992px){.fullscreen-image-container .short-title,.service-detail-image .short-title{bottom:40px;left:40px;font-size:48px;padding:16px;line-height:.7}.fullscreen-image-container .short-title span,.service-detail-image .short-title span{padding:16px}}.service-detail-image{width:100%;max-width:100vw;margin:0 auto;overflow:hidden}.fullscreen-image-container{width:100vw;margin:0 calc(-50vw + 50%) 0}.story-container{display:flex;flex-direction:column}@media (min-width: 768px){.story-container{flex-direction:row}}.sections-wrapper{margin:0 24px}@media (min-width: 992px){.sections-wrapper{margin:40px 0 56px 24px}}.event-image-container,.event-preview{position:relative;aspect-ratio:10/3;overflow:hidden}.event-image-container .event-background,.event-preview .event-background{width:100%;height:100%;object-fit:cover;filter:blur(50px);opacity:.5;position:absolute;top:0;left:0}.event-preview{width:100%;max-width:100vw;min-height:350px}@media (min-width: 768px){.event-preview.ratio-authenticated{aspect-ratio:9/3}}.event-preview .event-card-container{width:100%}@container (min-width: 900px){.event-preview .event-card-container{width:437px}}@container (max-width: 768px){.event-preview{aspect-ratio:unset;height:auto}.event-preview .event-content-overlay{padding:16px}}.event-preview .event-content-overlay{position:relative;z-index:2;width:100%;max-width:100vw;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:24px}@container (min-width: 900px){.event-preview .event-content-overlay{flex-direction:row;gap:24px}}.event-preview .event-content{position:relative;gap:24px;display:flex;flex-direction:column;align-items:center}@container (min-width: 768px){.event-preview .event-content{flex-direction:row;gap:24px}}.event-preview .event-main-image{width:100%;aspect-ratio:19/10;object-fit:cover;border-radius:4px}@container (min-width: 768px) and (max-width: 1200px){.event-preview .event-main-image{max-width:368px}}@container (min-width: 1201px){.event-preview .event-main-image{max-width:468px}}@container (min-width: 1401px){.event-preview .event-main-image{max-width:668px}}.event-image-container{margin:0 calc(-50vw + 50%) 0;width:100vw}.event-image-container .event-card-container{width:100%}@media (min-width: 900px){.event-image-container .event-card-container{width:437px}}@media (min-width: 768px){.event-image-container.ratio-authenticated{aspect-ratio:8/3}}@media (max-width: 768px){.event-image-container{aspect-ratio:unset;height:auto}.event-image-container .event-content-overlay{padding:16px}}.event-image-container .event-content-overlay{position:relative;z-index:2;width:100%;max-width:100vw;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:24px}@media (min-width: 768px){.event-image-container .event-content-overlay{flex-direction:row;gap:24px}}.event-image-container .event-content{position:relative;gap:24px;display:flex;flex-direction:column;align-items:center}@media (min-width: 768px){.event-image-container .event-content{flex-direction:row;gap:24px}}.event-image-container .event-main-image{width:100%;aspect-ratio:19/10;object-fit:cover;border-radius:4px}@media (min-width: 768px){.event-image-container .event-main-image{max-width:368px}}@media (min-width: 900px){.event-image-container .event-main-image{max-width:468px}}@media (min-width: 1200px){.event-image-container .event-main-image{max-width:668px}}.margin-authenticated{width:calc(100% + 32px)!important;margin:0 -16px 24px!important}@media (min-width: 768px){.margin-authenticated{width:calc(100% + 72px)!important;margin:0 -32px 24px!important}}