@media (max-width:800px) {
  .maincontainer:has(.topicheader) {padding-top:0}
}
.topicheader {position:relative; background-size: cover; background-position: center center; height:17rem; position:relative; margin-bottom: 1rem; }
.topicheader img {position:absolute; bottom: 60px; left:1rem; width:100px; height:100px; object-fit: contain; z-index:2; background:var(--color-background); padding:0.5rem;}
.topicheader h1 {margin:4rem 1rem 4rem 140px; color:white; position:absolute; z-index:2; bottom:0;}
@media (max-width:700px) {
  .topicheader img {top: 1rem; bottom:auto;}
  .topicheader h1 {margin-left:1rem;}
}

.topicheader s-element-tabs {position:absolute; bottom:0; left:1rem; --color-primary: white; z-index:2; }
.topicheader s-element-plusminus {position:absolute; bottom:1rem; right:1rem; --color-primary: white; z-index:2; color:white !important }

@media (max-width:500px) {
  .topicheader s-element-plusminus  { bottom:auto; top:1rem;} 
}


.topicheader::before {
    content: ''; /* Обязательно для отображения псевдоэлемента */
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.9) 100%);
    z-index: 1; /* Располагаем псевдоэлемент ниже содержимого */
    border-radius: var(--border-radius);
  }

s-topic-listitem {overflow:hidden; hyphens: auto;}

s-topic-item .topicfields > div {flex:1; gap:1rem; border-bottom:1px solid var(--color-gray); padding: 0.5rem 0; display:flex; width:100%;}
s-topic-item .topicfields > div > b {flex:1;}
s-topic-item .topicfields > div > s-topic-fieldvalue {flex:3;}




s-topic-flow.listItemGrid .flow {display:grid; grid-template-columns: 1fr 1fr 1fr; gap:1rem; margin-top:1rem;}
s-topic-flow.listItemGrid .flow img {width:100%; aspect-ratio: 1 / 1; object-fit: contain; background:var(--color-background); padding:1rem;}
@media (max-width: 500px) {
  s-topic-flow.listItemGrid .flow {grid-template-columns: 1fr 1fr; }
}

s-topic-flow.listItemGridAdvanced1 .flow {display:grid; grid-template-columns: 1fr 1fr 1fr ; gap:1rem; margin-top:1rem;}
s-topic-flow.listItemGridAdvanced1 .flow img {width:40%; aspect-ratio: 1 / 1; object-fit: contain; background-color:var(--color-surface-transparent);  padding:0.2rem; position:absolute; bottom:0.5rem; left:0.5rem;}
s-topic-flow.listItemGridAdvanced1 .flow .background {position:relative; width:100%; aspect-ratio: 1 / 1; background-color:var(--color-background); background-size:cover; background-repeat:no-repeat; background-position: center center; display:flex; flex-direction: column; gap:0.5rem; padding:0.5rem;}
s-topic-flow.listItemGridAdvanced1 .flow .category {display: inline-block; padding:0.2rem; border-radius: var(--border-radius); background-color: var(--color-background); color:var(--color-on-surface); font-size:0.75rem; }
@media (max-width: 500px) {
  s-topic-flow.listItemGridAdvanced1 .flow {grid-template-columns: 1fr 1fr; }
}

s-topic-flow.listItemColumn .flow img {display:none}
s-topic-flow.listItemColumn .flow .end {display:none}

s-topic-flow.listItemVacancy .flow s-topic-listitem a {color:inherit;display:flex; width:100%;}
s-topic-flow.listItemVacancy .flow s-topic-listitem .title {font-size: 1.2rem}
s-topic-flow.listItemVacancy .flow s-topic-listitem .money {font-size: 1.2rem; flex:1; text-align:right;}
s-topic-flow.listItemVacancy .flow s-topic-listitem .leftcolumn {flex:4;}
s-topic-item.topicVacancy .info {display:flex; gap:1rem; flex-direction: row-reverse;}
s-topic-item.topicVacancy .info > s-image {flex:1; margin:0 auto;}
s-topic-item.topicVacancy .info > div {flex:3}
s-topic-item.topicVacancy .topicfields > div > s-topic-fieldvalue {flex:2;}
@media (max-width: 500px) {
  s-topic-item.topicVacancy .info {flex-direction: column;}
  s-topic-flow.listItemVacancy .flow s-topic-listitem .leftcolumn{flex:2;}
}