.n2-grid-container > *{ margin: 1% !important; transition: transform 0.3s ease-in-out; } .n2-grid-container > *:hover{ transform: scale(1.02); z-index: 1 !important; box-shadow: 0 5px 25px 0 rgba(0, 0, 0, 0.4); } .n2-grid-container .more:after{ height: 3px !important; max-width: 0; transition: max-width 0.6s; margin: 0 auto; border-bottom: solid 3px; border-color: inherit !important; } .n2-grid-container > *:hover .more:after{ width: 100% !important; max-width: 150px !important; visibility: visible !important; } .n2-grid-container{ display: flex; width: 100%; flex-wrap: wrap; align-items: flex-start; justify-content:flex-start; } .n2-grid-container > * > *{ height: 50% !important; } @media screen and (max-width: 480px) { .n2-grid-container > * > * { height: 66% !important; } } .n2-grid-container > .single, .n2-grid-container > *{ width: 23% !important; } .n2-grid-container > .double{ width: 48% !important; display: flex !important; } .n2-grid-container > .double > *{ width: 50% !important; height: 100% !important; } .n2-grid-container > .triple{ width: 73% !important; display: flex !important; } .n2-grid-container > .triple > *:first-child{ width: 66.66666% !important; height: 100% !important; } .n2-grid-container > .triple > *:last-child{ width: 33.33333% !important; height: 100% !important; } .n2-grid-container > .full{ width: 98% !important; display: flex !important; } .n2-grid-container > .full > *:first-child{ width: 75% !important; height: 100% !important; } .n2-grid-container > .full > *:last-child{ width: 25% !important; height: 100% !important; } @media only screen and (max-width: 1024px) and (min-width: 801px){ .n2-grid-container > .single, .n2-grid-container > *{ width: 23% !important; } .n2-grid-container > .double{ width: 48% !important; } .n2-grid-container > .triple{ width: 73% !important; } .n2-grid-container > .full{ width: 98% !important; } } @media only screen and (max-width: 800px){ .n2-grid-container > *{ margin-left: 0% !important; margin-right: 0% !important; } .n2-grid-container > .single, .n2-grid-container > *{ width: 100% !important; } .n2-grid-container > .double{ width: 100% !important; display: table !important; } .n2-grid-container > .double > *,.n2-grid-container > .triple > *:first-child,.n2-grid-container > .triple > *:last-child,.n2-grid-container > .full > *:first-child,.n2-grid-container > .full > *:last-child{ width: 100% !important; height: 50% !important; } .n2-grid-container > .triple{ width: 100% !important; display: table !important; } .n2-grid-container > .full{ width: 100% !important; display: table !important; } }@media only screen and (max-width: 800px) and (min-width: 481px){ .n2-grid-container > *{ margin-left: 1% !important; margin-right: 1% !important; } .n2-grid-container > .single, .n2-grid-container > *{ width: 48% !important; } .n2-grid-container > .double{ width: 48% !important; } .n2-grid-container > .triple{ width: 48% !important; } .n2-grid-container > .full{ width: 48% !important; } } .n2-grid-container > *{ position: relative !important; } *:focus { outline: none; } .app-container .show-al{ display: none !important; } .ao .app-container .show-tp{ display: none !important; } .ao .app-container .show-al{ display: block !important; }