@media all {
  body.category-main > main .page {
    display: grid;
    overflow: hidden;
  }
  body.category-main > main .page:nth-child(even) .container {
    color: #26325A;
    background-color: #F5F7FA;
  }
  body.category-main > main .page .frame {
    position: relative;
    background-color: #26325A;
  }
  body.category-main > main .page .frame .image {
    aspect-ratio: var(--aspect-ratio);
    opacity: 0.6;
  }
  body.category-main > main .page .container {
    color: white;
    background-color: #26325A;
  }
  body.category-main > main .page .container ._more::before {
    background-color: var(--invert-btn, #AE90FA);
  }
  body.category-main > main .page .container ._more:hover {
    color: var(--invert-btn, #AE90FA);
  }
  body.category-main > main .page .subtitle {
    margin-bottom: 1.75em;
    line-height: 1.2;
  }
  body.category-main.alt > main .page .container {
    background-color: #EFE9FE;
    color: #26325A;
  }
  body.category-main.alt > main .page:nth-child(even) .container {
    background-color: #AE90FA;
    color: white;
  }
}
@media (min-width: 850px) {
  body.category-main > main .pages {
    clear: both;
  }
  body.category-main > main .page {
    --aspect-ratio: 1.43;
    grid-template-columns: 30% 40% 30%;
    border-radius: 20px;
  }
  body.category-main > main .page .frame {
    grid-column: 1 / span 2;
    grid-row: 1;
  }
  body.category-main > main .page .frame::after {
    right: 32.5%;
  }
  body.category-main > main .page .title {
    margin-bottom: 0.3em;
  }
  body.category-main > main .page .container {
    grid-column: 3 / span 1;
    grid-row: 1;
  }
  body.category-main > main .page:nth-child(odd) .frame {
    grid-column: 2 / span 2;
  }
  body.category-main > main .page:nth-child(odd) .container {
    grid-column: 1 / span 1;
  }
}
@media (min-width: 1400px) {
  body.category-main > main .intro .drawing {
    width: 280px;
    max-height: 220px;
  }
  body.category-main > main .page {
    margin-bottom: 120px;
  }
  body.category-main > main .page .frame::after {
    margin-top: 40px;
    font-size: 26px;
  }
  body.category-main > main .page .title {
    font-size: 41px;
  }
  body.category-main > main .page .subtitle {
    font-size: 22px;
  }
  body.category-main > main .page .container {
    padding: 0 60px;
  }
}
@media (min-width: 850px) and (max-width: 1399px) {
  body.category-main > main .intro .drawing {
    width: 165px;
    max-height: 155px;
  }
  body.category-main > main .page {
    margin-bottom: 60px;
  }
  body.category-main > main .page .frame::after {
    margin-top: 28px;
    font-size: 16px;
  }
  body.category-main > main .page .title {
    font-size: 24px;
  }
  body.category-main > main .page .subtitle {
    font-size: 14px;
  }
  body.category-main > main .page .container {
    padding: 0 35px;
  }
}
@media (max-width: 849px) {
  body.category-main > main .intro .drawing {
    width: 123px;
  }
  body.category-main > main .page {
    --aspect-ratio: 1.19;
    margin-bottom: 40px;
    border-radius: 12px;
  }
  body.category-main > main .page .frame::before {
    width: 150px;
  }
  body.category-main > main .page .frame::after {
    right: calc(50% - 75px);
    margin-top: 22px;
    font-size: 12px;
  }
  body.category-main > main .page .container {
    padding: 30px;
  }
  body.category-main > main .page .title {
    margin-bottom: 0.25em;
    font-size: 17px;
  }
}