.recent-news-wrapper{grid-template:repeat(2,1fr)/repeat(4,1fr);gap:2em;width:100%;display:grid}.all-news-wrapper{grid-template:auto/repeat(3,1fr);gap:2em;width:100%;display:grid}.recent-news-wrapper>*,.all-news-wrapper>*{z-index:2;aspect-ratio:1;position:relative}.recent-news-wrapper>:first-child{grid-area:1/1/-1/3}.recent-news-wrapper>:before,.all-news-wrapper>:before{content:"";aspect-ratio:1;clip-path:polygon(5% 0,100% 0,95% 100%,0 100%);width:calc(100% + 20px);transition:all var(--transition-animation);z-index:-1;position:absolute;top:50%;left:50%;translate:-50% -50%}.recent-news-wrapper>[data-color="1"]:before,.all-news-wrapper>[data-color="1"]:before{background-color:var(--clr-1)}.recent-news-wrapper>[data-color="2"]:before,.all-news-wrapper>[data-color="2"]:before{background-color:var(--clr-2)}.recent-news-wrapper>[data-color="3"]:before,.all-news-wrapper>[data-color="3"]:before{background-color:var(--clr-3)}.recent-news-wrapper>[data-color="4"]:before,.all-news-wrapper>[data-color="4"]:before{background-color:var(--clr-4)}.recent-news-wrapper>:nth-of-type(2),.recent-news-wrapper>:nth-of-type(3){aspect-ratio:initial;grid-column:span 2}.recent-news-wrapper>:nth-of-type(2):before,.recent-news-wrapper>:nth-of-type(3):before{aspect-ratio:initial;height:calc(100% + 20px)}.recent-news-wrapper>:hover:before,.recent-news-wrapper>:focus-visible:before,.all-news-wrapper>:hover:before,.all-news-wrapper>:focus-visible:before{clip-path:polygon(0 0,100% 0,100% 100%,0 100%)}.recent-news-wrapper>:focus-within:before,.all-news-wrapper>:focus-within:before{width:103%}.recent-news-wrapper>:first-child article,.all-news-wrapper>:first-child article{aspect-ratio:1}.recent-news-wrapper article,.all-news-wrapper article{background-color:var(--clr-bg);width:100%;height:100%;color:var(--clr-bg);flex-direction:column;justify-content:flex-end;padding:1em;display:flex}.recent-news-wrapper article>:not(.overlay),.all-news-wrapper article>:not(.overlay){z-index:10}.recent-news-wrapper .overlay,.all-news-wrapper .overlay{opacity:1;background:linear-gradient(#000 0%,#0000 50%,#000 100%);flex-direction:column;justify-content:flex-end;align-items:flex-start;padding:1em;display:flex}.recent-news-wrapper .overlay svg,.all-news-wrapper .overlay svg{position:absolute;top:5%;right:5%}@media screen and (max-width:1200px){.recent-news-wrapper,.all-news-wrapper{flex-direction:column;display:flex}.recent-news-wrapper>:nth-of-type(2),.recent-news-wrapper>:nth-of-type(3){aspect-ratio:1}}