.collage{--collage-card-height-sm:280px;--collage-card-height-md:340px;--collage-card-height-lg:460px;display:grid;grid-column-gap:var(--grid-mobile-horizontal-spacing);grid-row-gap:var(--grid-mobile-vertical-spacing)}.collage-1{& .card-overlay{@media (min-width:750px){padding-bottom:45%}@media (min-width:990px){padding-bottom:33.3333%}}}.collage-2{grid-template-columns:repeat(3,minmax(0,1fr));& .card-overlay{grid-column:span 3;@media (min-width:750px){grid-column:span 1;width:100%;max-width:100%;height:var(--collage-card-height-lg);padding:0;&:nth-child(2){grid-column:span 2}}}}.collage-3{grid-template-columns:repeat(2,minmax(0,1fr));& .card-overlay{width:100%;max-width:100%;grid-column:span 2;padding-bottom:100%;@media (min-width:750px){grid-column:span 1;height:var(--collage-card-height-sm);padding:0;&:nth-child(2){order:-1;grid-column:span 2}}@media (min-width:990px){height:var(--collage-card-height-lg);&:nth-child(2){grid-column:span 2;order:0}}}@media (min-width:990px){grid-template-columns:repeat(4,minmax(0,1fr))}}.collage-4{grid-template-columns:repeat(3,minmax(0,1fr));& .card-overlay{grid-column:span 3;@media (min-width:750px){grid-column:span 1;width:100%;max-width:100%;height:var(--collage-card-height-sm);padding:0;&:nth-child(2),&:nth-child(3){grid-column:span 2}}@media (min-width:990px){height:var(--collage-card-height-md)}}}.collage-5{grid-template-columns:repeat(3,minmax(0,1fr));& .card-overlay{grid-column:span 3;padding-bottom:100%;@media (min-width:750px){grid-column:span 1;width:100%;max-width:100%;height:var(--collage-card-height-sm);padding:0;&:first-child{grid-column:span 2}}@media (min-width:990px){height:var(--collage-card-height-md)}}}.collage-6{grid-template-columns:repeat(2,minmax(0,1fr));& .card-overlay{grid-column:span 2;padding-bottom:100%;@media (min-width:750px){padding-bottom:0;grid-column:span 1;height:var(--collage-card-height-sm)}@media (min-width:990px){height:var(--collage-card-height-md);padding:0}}@media (min-width:750px){&>:first-child,&>:last-child{grid-column:span 2}}@media (min-width:990px){grid-template-columns:repeat(3,minmax(0,1fr));&>:last-child{grid-column:span 3}}@media (min-width:1200px){grid-template-columns:repeat(4,minmax(0,1fr));&>:last-child{grid-column:span 2}}}.collage-7{grid-template-columns:repeat(2,minmax(0,1fr));& .card-overlay{grid-column:span 2;padding-bottom:100%;@media (min-width:750px){padding:0;height:var(--collage-card-height-sm);grid-column:span 1}@media (min-width:990px){height:var(--collage-card-height-md)}}@media (min-width:750px){&>:first-child{grid-column:span 2}}@media (min-width:990px){grid-template-columns:repeat(3,minmax(0,1fr));&>:last-child{grid-column:span 2}}@media (min-width:1200px){grid-template-columns:repeat(4,minmax(0,1fr));&>:last-child{grid-column:span 1}}}.collage-8{grid-template-columns:repeat(2,minmax(0,1fr));& .card-overlay{padding-bottom:100%;grid-column:span 2;@media (min-width:750px){padding-bottom:0;height:var(--collage-card-height-sm);grid-column:span 1}@media (min-width:990px){height:var(--collage-card-height-md)}}@media (min-width:750px){&>:first-child,&>:last-child{grid-column:span 2}}@media (min-width:990px){grid-template-columns:repeat(3,minmax(0,1fr));&>:last-child{grid-column:span 1}}@media (min-width:1200px){grid-template-columns:repeat(4,minmax(0,1fr));&>:last-child{grid-column:span 4}}}