:root {
  --red: #e47b84;
  --green: #b6d87e;
  --blue: #7eb5d9;
  --yellow: #fec80399;
  --AiAi: #b4444c;
  --fff: #fff;
  --f5f5: #f5f5f5;
  --fafa: #fafafa;
  --eee: #eee;
  --ccc: #ccc;
  --leftWide: #f5f5f5;
  --header: var(--fafa);
  --ark-font_family: "Roboto", "Zen Kaku Gothic New", sans-serif;
  --fsz17: 1.0625em;
  --fsz175: 1.09375em;
  --fsz18: 1.125em;
  --fsz19: 1.1875em;
  --fsz20: 1.25em;
  --Gutter: 3rem;
}

.has-text > .c-headLogo {
  font-size: 1em;
  line-height: 1.4;
}

.l-container {
  container: body/inline-size;
  max-width: 100%;
  padding-left: min(2svw, 3rem);
  padding-right: min(2svw, 3rem);
}

.l-footer__foot {
  background: var(--leftWide);
  height: 6.5em;
  display: flex;
  align-items: center;
}

.l-content__body {
  margin: 0 auto;
}

.wrapper-double {
  display: grid;
  grid-template-columns: 100%;
  background: linear-gradient(to right, var(--leftWide) 0%, var(--leftWide) 50%, var(--fff) 50%, var(--fff) 100%);
}
.wrapper-double h1 {
  grid-column: 1/2;
  grid-row: 1/2;
  height: 55svh;
  line-height: 70svh;
}
.wrapper-double h2 {
  grid-column: 1/2;
  grid-row: 2/3;
  font-size: var(--fsz18);
  font-weight: 400;
}

.descOne {
  grid-column: 1/2;
  grid-row: 3/4;
}
.descOne p {
  line-height: 1.8;
  padding-bottom: 1em;
}

.hasnot {
  grid-column: 2/3;
  grid-row: 4/5;
  background: var(--fafa);
}

@container body (width < 980px) {
  .wrapper-double {
    padding: 0 2em 4em;
  }
  .wrapper-double h1 {
    font-size: 11svw;
    text-align: center;
  }
  .wrapper-double h2 {
    padding-bottom: 2em;
  }
  .poemka {
    display: none;
  }
}
@container body (min-width: 980px) {
  .wrapper-double {
    grid-template-columns: 50% 50%;
    grid-template-rows: 55svh 5svh 28svh 12svh;
  }
  .wrapper-double h1 {
    grid-column: 1/3;
    grid-row: 1/2;
    font-size: 7.5svw;
    padding-left: 50%;
    margin-left: -0.3em;
    text-align: left;
  }
  .wrapper-double h2 {
    grid-column: 1/3;
    grid-row: 2/3;
    padding-left: 1em;
  }
  .hash1 {
    grid-column: 1/2;
    grid-row: 1/2;
    height: 60svh;
  }
  .descOne {
    grid-column: 1/2;
    grid-row: 3/5;
    padding-left: 2em;
    white-space: nowrap;
  }
  .poemka {
    grid-column: 2/3;
    grid-row: 3/4;
    writing-mode: vertical-rl;
    display: flex;
    align-items: center;
  }
}
@container body (min-width: 1200px) {
  .wrapper-double h2 {
    padding-left: 4em;
  }
  .descOne {
    padding-left: 5em;
    white-space: normal;
  }
}
.work {
  background: linear-gradient(to right, var(--fff) 0%, var(--fff) 50%, var(--fafa) 50%, var(--fafa) 100%);
  margin: 0 -3rem;
  padding-bottom: 8em;
}
.work h2 {
  font-size: 3em;
  font-weight: 400;
  text-transform: capitalize;
  padding: 2em calc(var(--Gutter) * 2) 0;
  padding: 2em calc(var(--Gutter) * 2) 0;
}
.work h2::first-letter {
  font-size: 1.4em;
}

.works {
  padding: 3em var(--Gutter) 2em;
  background: url(/assets/img/marjan-blan-bighig-unsplash.avif) no-repeat 0px 0px;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  display: grid;
  gap: 3em 2em;
}
.works figure img {
  vertical-align: bottom;
  box-shadow: 5px 5px 15px #bebebe, -5px -5px 45px #ffffff;
}
.works figcaption {
  text-align: right;
  padding-right: 1em;
  margin-top: 0.5em;
  background: #000;
  color: var(--eee);
  border-radius: 1em;
}

.note {
  background: linear-gradient(to right, var(--fff) 0%, var(--fff) 50%, var(--fafa) 50%, var(--fafa) 100%);
}
.note h3 {
  font-size: 3em;
  font-weight: 400;
  text-transform: capitalize;
}
.note h3::first-letter {
  font-size: 1.4em;
}

.p-postList__body {
  align-self: center;
  width: 100%;
}

.p-postList.-type-list .p-postList__title {
  font-family: serif;
}

.p-postList__meta {
  font-size: 1rem;
  color: currentColor;
}

@container body (width < 700px) {
  .note {
    padding: 0 2em;
  }
  .p-postList__link {
    flex-direction: column;
  }
  .p-postList.-type-list .p-postList__title {
    font-size: var(--fsz18);
  }
  .p-postList.-type-list .p-postList__thumb {
    min-width: 100%;
    padding-bottom: 1em;
  }
}
@container body (min-width: 700px) {
  .note {
    margin: 0 -3rem;
    padding: var(--Gutter);
  }
  .note h3 {
    margin-left: var(--Gutter);
  }
  .p-postList {
    margin-left: var(--Gutter);
    display: grid;
    grid-template-columns: 100%;
    grid-auto-rows: auto;
  }
  .p-postList.-type-list .p-postList__title {
    white-space: nowrap;
  }
  .p-postList__item {
    width: 60%;
  }
  .p-postList.-type-list .p-postList__thumb {
    max-width: 240px;
  }
}
@container body (min-width: 1200px) {
  .p-postList.-type-list .p-postList__title {
    font-size: 1.5vw;
  }
}