@layer components{.blogger-about{background-color:#e9eefb;border-radius:15px;flex-direction:column;gap:30px;padding:30px;display:flex}.blogger-about__header{flex-direction:column;gap:10px;display:flex}.blogger-about__title{font-size:var(--font-size-large);font-weight:var(--font-weight-semibold)}.blogger-about__content{font-size:var(--font-size-base);white-space:pre-wrap}.blogger-about__divider{background-color:#d1d5dc;height:1px}.blogger-about__grid{grid-template-columns:1fr;gap:20px;display:grid}.blogger-about__section{flex-direction:column;gap:10px;display:flex}.blogger-about__section-title{font-weight:var(--font-weight-semibold);font-size:var(--font-size-large)}.blogger-about__list{flex-direction:column;gap:8px;display:flex}.blogger-about__item{font-size:var(--font-size-base);gap:10px;display:flex}.blogger-about__item-label{font-weight:var(--font-weight-semibold)}@media (width<768px){.blogger-about{padding:20px}}@media (768px<=width<1200px){.blogger-about__grid{grid-template-columns:1fr 1fr}}@media (width>=1200px){.blogger-about__title,.blogger-about__section-title{font-size:var(--font-size-extra)}.blogger-about__grid{grid-template-columns:1fr 1fr;gap:20px 90px}}.blogger-aside{background-color:var(--color-third);color:var(--color-third-text);border-radius:15px;flex-direction:column;gap:15px;padding:20px;display:flex}.blogger-aside__contacts{flex-direction:column;gap:10px;display:flex}.blogger-aside__row{align-items:center;gap:10px;display:flex}.blogger-aside__label{font-weight:var(--font-weight-semibold)}.blogger-aside__text{font-size:var(--font-size-base);font-weight:var(--font-weight-semibold)}.blogger-aside__actions{flex-direction:column;gap:15px;margin-top:5px;display:flex}.blogger-aside__button{width:100%;margin-top:8px}.blogger-aside__messengers{gap:10px;display:flex}@media (width>=1200px){.blogger-aside__text{max-width:340px}}.blogger-cooperation{flex-direction:column;gap:20px;display:flex}.blogger-cooperation__section{flex-direction:column;gap:16px;display:flex}.blogger-cooperation__label{font-size:var(--font-size-small);font-weight:var(--font-weight-semibold)}.blogger-cooperation__tags{flex-wrap:wrap;gap:10px;display:flex}.blogger-cooperation__tag{font-size:var(--font-size-base);line-height:var(--pill-line-height);background-color:#e9eefb;border-radius:5px;align-items:center;padding-block:7px;padding-inline:10px;display:inline-flex}.blogger-header{background-color:var(--color-first);color:var(--color-first-text);border-radius:15px;gap:20px;padding:20px;display:grid}.blogger-header__gallery{min-height:260px;position:relative;overflow:hidden}.blogger-header__gallery .swiper{border-radius:15px}.blogger-header__gallery .swiper,.blogger-header__gallery .swiper-wrapper,.blogger-header__gallery .swiper-slide{height:100%}.blogger-header__favourite{z-index:2;position:absolute;top:16px;right:16px}.blogger-header__rating{z-index:2;position:absolute;top:16px;left:16px}.blogger-header__image{object-fit:cover;width:100%;height:100%;display:block}.blogger-header__content{flex-direction:column;gap:15px;display:flex;position:relative}.blogger-header__content .heading{margin-right:36px}.blogger-header__top-row{border-bottom:1px solid #fff;align-items:center;gap:15px;margin-bottom:3px;padding-bottom:18px;display:flex}.blogger-header__name{font-size:var(--font-size-small);font-weight:var(--font-weight-regular);align-items:center;gap:10px;display:flex}.blogger-header__name svg{width:18px}.blogger-header__name h1{font-size:var(--font-size-base);font-weight:var(--font-weight-regular)}.blogger-header__location{font-size:var(--font-size-base);align-items:center;gap:6px;display:inline-flex}.blogger-header__location svg{width:18px}.blogger-header__section{flex-direction:column;gap:8px;display:flex}.blogger-header__section._audience{gap:2px}.blogger-header__section-label{font-size:var(--font-size-small);font-weight:var(--font-weight-semibold)}.blogger-header__tags{flex-wrap:wrap;gap:10px;display:flex}.blogger-header__tag{background-color:var(--color-first-medium);color:#fff;font-size:var(--font-size-base);line-height:var(--pill-line-height);border-radius:5px;align-items:center;padding-block:7px;padding-inline:10px;display:inline-flex}.blogger-header__tag--link{text-decoration:none}.blogger-header__tag--link:hover{opacity:.8}.blogger-header__socials{flex-wrap:wrap;gap:12px;display:flex}.blogger-header__audience{flex-direction:column;gap:1px;min-width:150px;max-width:150px;display:flex}.blogger-header__audience-top{justify-content:space-between;align-items:center;margin-bottom:7px;display:flex}.blogger-header__audience-line{background-color:var(--color-second);border-radius:999px;width:100%;height:3px;position:relative;overflow:hidden}.blogger-header__audience-man{background-color:#fff;position:absolute;top:0;bottom:0;left:0}.blogger-header__bottom{flex-wrap:wrap;gap:15px 50px;display:flex}.blogger-header__audience-bottom{justify-content:space-between;gap:12px;font-size:10px;display:flex}@media (width<768px){.blogger-header{margin-left:calc(var(--container-padding) * -1);margin-right:calc(var(--container-padding) * -1);border-radius:0;grid-template-columns:1fr}}@media (768px<=width<1200px){.blogger-header{grid-template-columns:minmax(0,1.2fr) minmax(0,1.8fr);align-items:stretch}}@media (width>=1200px){.blogger-header{grid-template-columns:minmax(270px,.8fr) minmax(0,2fr);align-items:stretch}}.collaborations-carousel .collaboration-item{background-color:#e9eefb;border-radius:15px;justify-content:center;align-items:center;width:150px;height:150px;transition:filter .15s ease-out,transform .15s ease-out;display:flex}.collaborations-carousel .collaboration-item[href]:hover{cursor:pointer}.collaborations-carousel .collaboration-item[href]:hover .collaboration-item__image{filter:none}.collaborations-carousel .collaboration-item__image{filter:grayscale()opacity(.7);object-fit:contain;width:100px;height:100px;transition:filter .15s ease-out}.socials-metrics__grid{grid-template-columns:repeat(auto-fill, minmax(min(var(--socials-metrics-card-min-width), 100%), 1fr));gap:20px;display:grid}.socials-metrics__card{background-color:#e9eefb;border-radius:15px;flex-direction:column;gap:15px;padding:25px 20px;display:flex}.socials-metrics__card-top{align-items:center;gap:10px;display:flex}.socials-metrics__card-name{font-weight:var(--font-weight-semibold);font-size:var(--font-size-large)}.socials-metrics__divider{background-color:#d1d5dc;height:1px}.socials-metrics__list{flex-direction:column;gap:15px;display:flex}.socials-metrics__row{font-size:var(--font-size-base);justify-content:space-between;gap:10px;display:flex}.socials-metrics__label{font-weight:var(--font-weight-semibold)}.socials-metrics__value{white-space:nowrap}@media (width<768px){:root{--socials-metrics-card-min-width:240px}}@media (768px<=width<1200px){:root{--socials-metrics-card-min-width:260px}}@media (width>=1200px){:root{--socials-metrics-card-min-width:280px}.socials-metrics__card-name{font-size:var(--font-size-extra)}}}@layer templates{#template-blogger #blogger-main{grid-area:blogger-main}#template-blogger #blogger-aside{grid-area:blogger-aside;align-self:flex-start}#template-blogger #header{grid-area:header}#template-blogger #about{grid-area:about}#template-blogger #cooperation{grid-area:cooperation}#template-blogger #socials{grid-area:socials}@media (width<768px){#template-blogger #blogger{grid-template-areas:"header""about""cooperation""socials""blogger-aside""portfolio""reviews""collaborations"}#template-blogger #blogger-main{display:contents}#template-blogger .gallery-carousel .portfolio-item,#template-blogger .gallery-carousel .review-item{height:55vw;max-height:60vh}}@media (768px<=width<1200px){#template-blogger #blogger{grid-template-areas:"header""about""cooperation""socials""blogger-aside""portfolio""reviews""collaborations"}#template-blogger #blogger-main{display:contents}#template-blogger .gallery-carousel .portfolio-item{height:490px}#template-blogger .gallery-carousel .review-item{height:220px}}@media (width>=1200px){#template-blogger{--grid-gap:70px}#template-blogger #blogger{grid-template-areas:"blogger-main blogger-aside";grid-template-columns:1fr var(--aside-width)}@media (width<1400px){#template-blogger #blogger{grid-template-columns:1fr calc(var(--aside-width) - 100px)}}#template-blogger #blogger-main{grid-template-areas:"header""about""cooperation""socials"}#template-blogger .gallery-carousel .portfolio-item{height:490px}#template-blogger .gallery-carousel .review-item{height:250px}}}
