.card { position: relative; overflow: hidden; display: grid;}.card::before,.card::after { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0; transition: opacity .45s ease;}.card::before { opacity: 1; background: linear-gradient( to bottom, rgba(30, 2, 3, 0) 60%, rgba(30, 2, 3, 1) 100% );}.card::after { opacity: 0; background: linear-gradient( to bottom, rgba(30, 2, 3, 0.3) 0%, rgba(30, 2, 3, 1) 100% );}.card:hover::before { opacity: 0;}.card:hover::after { opacity: 1;}.card > .card-first,.card > .card-second,.card > .card-inner { position: relative; z-index: 1;}.card > .card-first,.card > .card-second { grid-area: 1 / 1; align-self: end;}.card > .card-first { transform: translateY(0); opacity: 1; transition: transform .45s ease, opacity .45s ease;}.card:hover > .card-first { transform: translateY(-100%); opacity: 0;}.card > .card-second { transform: translateY(100%); opacity: 0; transition: transform .45s ease, opacity .35s ease;}.card:hover > .card-second { transform: translateY(0); opacity: 1;}.card-inner { -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px);} .brxe-container {width: 100%} .woocommerce main.site-main {width: 100%} #brx-content.wordpress {width: 100%} .brxe-section {margin-right: 16px; margin-bottom: 32px; margin-left: 16px; width: calc(100% - 32px)} html {background-color: #F4F4F4} body {background: none}@media (max-width: 478px) { .brxe-section {margin-right: 8px; margin-bottom: 16px; margin-left: 8px; width: calc(100% - 16px)}}