.gate {
flex-grow: 1; display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; background-color: $main-bg-color; a { display: flex; flex: 0 50%; height: 100%; justify-content: center; align-items: center; box-sizing: border-box; border: 1px solid $base-white; transition: .5s ease; &:hover { .category { opacity: 0.25; } p { opacity: 1; } } .category { display: flex; flex: 0 100%; opacity: 0.7; height: 100%; background-repeat: no-repeat; background-size: cover; transition: .5s ease; backface-visibility: hidden; @include mobile { opacity: 0.25; } } p { color: $p_lightest; font-size: 42px; font-weight: 700; transition: .5s ease; opacity: 0; position: absolute; text-align: center; text-shadow: $dark 3px 3px 3px; @include mobile { opacity: 1; } } } @include mobile { flex-direction: column; a { height: 50%; width: 100%; } }
}