.container-query-demo-1{display:flex;flex-direction:column;width:100%}.container-query-demo-1 .card{display:grid;column-gap:15px;row-gap:15px;grid-template-columns:1fr 1fr 1fr;grid-template-rows:repeat(4,auto);background-color:var(--pink-2-rgba);padding:20px;border-radius:10px;grid-template-areas:"title title title" "author author-name author-name" "image text-1 text-2" ".  read-more .";max-width:900px}.container-query-demo-1 .title{font-weight:700;text-transform:uppercase;grid-area:title;text-align:center}.container-query-demo-1 .author img{width:100%;object-fit:fill;width:100px}.container-query-demo-1 .image img{width:100%;object-fit:fill}.container-query-demo-1 .image{grid-area:image}.container-query-demo-1 .text-1{grid-area:text-1}.container-query-demo-1 .text-2{grid-area:text-2}.container-query-demo-1 .author{grid-area:author}.container-query-demo-1 .author-name{grid-area:author-name}.container-query-demo-1 .read-more{font-style:italic;grid-area:read-more}.container-query-demo-1 .container{margin:50px 0;overflow:hidden}.container-query-demo-1 .container .read-more{display:none}.container-query-demo-1 .container-2{max-width:400px}.container-query-demo-1 .container.container-2-2{max-width:300px}.container-query-demo-1 .container-3{max-width:400px;height:400px}.container-query-demo-1 .container-4{max-width:900px;display:flex;gap:30px;display:none}.container-query-demo-1 .wrapper{container-type:inline-size;container-name:card}.container-query-demo-1 .container-3 .wrapper{container-type:size;container-name:card-size}@container card (max-width: 600px){.container-query-demo-1 .card{grid-template-columns:1fr 1fr;grid-template-areas:"title title" "author author-name" "text-1 text-2" "read-more read-more"}.container-query-demo-1 .image{display:none}}@container card (max-width: 350px){.container-query-demo-1 .card{grid-template-columns:1fr 1fr;grid-template-areas:"title title" "author author-name" "text-1 text-1" "text-2 text-2" "read-more read-more"}}@container card-size (max-height: 500px){.container-query-demo-1 .card{grid-template-columns:1fr 1fr;grid-template-areas:"title title" "author author-name" "text-1 text-1" "read-more read-more"}:is(.text-1,.text-2) p{display:none}.container-query-demo-1 .text-1 :is(p:nth-child(1),p:nth-child(2)){display:block}.container-query-demo-1 .image{display:none}.container-query-demo-1 .container .read-more{display:block}}@supports (container-type: inline-size){.support-test{display:none}}