.article-background{max-width:var(--page-width);margin:.6em auto;border-radius:var(--border-radius);background-color:var(--page-background-color)}.article-topic{max-width:760px;padding:1em 1em 0}.article-header{border-radius:5px 5px 0 0;padding:.25rem 1rem .5rem;background:linear-gradient(to right bottom,hsl(340.1,67.9%,42.7%),hsl(224.9,49.8%,50%));height:10rem}.article-title{color:hsl(0,0%,100%);font-size:clamp(1.6rem, calc(1rem + 3.5vw), 3rem);text-shadow:0 2px 2px rgba(0,0,0,.5);line-height:1.1}.article-sub-title{font-size:clamp(1.4rem, calc(1rem + 3vw), 2rem);letter-spacing:-.02rem;line-height:1.1}.article-body{border-radius:5px;background-color:hsl(0,0%,95%);padding:1.2rem;max-width:710px;position:relative;top:-20px;z-index:1;margin:0 auto}.article-body p,a,em,h2,h3,h4,i,ol,ul{color:hsl(0,5.6%,7.1%)}.article-date{display:block;margin:2rem auto .5rem;color:hsl(0,5.6%,7.1%);text-align:center}.pageWidth li{max-width:94%}.pageWidth li span{font-weight:400}.info-text{margin:2.5em .8em;padding:.4em .3em;border-left:3px solid hsl(36,100%,50%)}.section1{grid-area:image;display:flex;flex-direction:column;justify-content:center;align-items:center}.section2{display:flex;flex-direction:column;grid-area:large}.section3{display:flex;flex-direction:column;grid-area:small}.box1{display:grid;grid-template-columns:55% 45%;grid-template-areas:'image large' 'small small';grid-row-gap:1em;margin:1em 0}.box2{display:grid;grid-template-columns:35% 65%;grid-template-areas:'image large' 'image small';grid-row-gap:1em;margin-bottom:1em}.box3{display:grid;grid-template-columns:35% 65%;grid-template-areas:'image large';margin:1em 0;grid-row-gap:1em}.box1 .section2{align-self:center;margin-left:.7em}.box1 .section1 img{max-width:100%}.box2 .section1 img{max-width:80%}.box3 .section1 img{max-width:100%}.box2 .section2{align-self:center}@media only screen and (max-width:525px){.box2{grid-template-areas:'large' 'image' 'small'}}@media only screen and (min-width:526px) and (max-width:710px){.box1 .section2{margin-left:0}.box1 .section1 img{max-width:60%}}@media only screen and (max-width:710px){.box1{grid-template-columns:1fr;grid-template-areas:'image' 'large' 'small'}}@media only screen and (max-width:730px){.box2{grid-template-areas:'large large' 'image small'}.box2 .section3{align-self:center}.box3{grid-template-columns:1fr;grid-template-areas:'image' 'large'}.box3 .section1 img{max-width:60%}}