// INTRODUCTION .product { padding: 8rem 5vw 0; a { text-decoration: none; color: inherit; &:hover { color: $color-gray-darker; } } &__header { text-align: center; padding: 5rem 0 0; color: $color-black; &--family { text-align: left; padding: 5rem 0 2rem; border-bottom: 3px solid $color-bg; } } &__content { max-width: $max-width; margin: 0 auto; padding: 3rem 5vw 1rem; text-align: center; @include respond(615px) { padding: 3rem; } } &__grid { margin-top: 3rem; display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: 3rem; @include respond(960px) { grid-template-columns: repeat(2, 1fr); grid-gap: 1rem; } @include respond(700px) { grid-template-rows: auto; } @include respond(480px) { grid-template-columns: 1fr; } } &__single { padding: 0 2rem 3rem; box-shadow: 0 10px 10px rgba($color-black, 0.07); } &__item { height: 100%; } &__img-wrapper { position: relative; height: 100%; &:hover { cursor: pointer; .product__label { opacity: 1; } } } &__img { display: block; height: auto; width: 100%; object-fit: contain; object-position: center; z-index: 1; } &__label { position: absolute; display: flex; align-items: center; justify-content: center; padding: 2rem; top: 0; left: 0; background-color: rgba($color-black, 0.75); color: $color-white; opacity: 0; z-index: 1; width: 100%; height: 100%; transition: opacity 0.3s; @include respond(768px) { opacity: 1; height: auto; top: unset; bottom: 0; } } &__list-item { list-style: none; padding: 2rem 0 5rem; border-bottom: 3px solid $color-bg; .h3 { padding-top: 2rem; color: $color-gray-dark; font-weight: 500; margin-bottom: 0; } } } .families { padding: 8rem 5vw; display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: 3rem; @include respond(960px) { grid-template-columns: repeat(2, 1fr); grid-gap: 1rem; } @include respond(450px) { grid-template-columns: 1fr; } &__single { position: relative; text-decoration: none; color: $color-white; height: 100%; &:hover { .families__name { opacity: 1; } } } &__img { display: block; width: 100%; height: auto; object-fit: contain; object-position: center; transition: filter 0.3s; } &__name { padding: 3rem 1rem; position: absolute; top: 0; left: 0; height: 100%; width: 100%; background-color: rgba($color-black, 0.7); color: $color-white; z-index: 2; display: grid; justify-content: center; align-items: center; opacity: 0; transition: opacity 0.3s; @include respond(768px) { opacity: 1; height: auto; top: unset; bottom: 0; } } } .projects { padding-top: 8rem; &__grid { padding: 2rem 0; display: grid; grid-template-columns: 30% auto; grid-gap: 5rem; @include respond(1024px) { grid-template-columns: 1fr; padding: 5rem 5vw; } } &__img-wrapper { position: relative; width: 100%; height: 100%; min-height: 45rem; } &__grid-item { padding: 5rem 3rem; background-color: #d4d0c7; color: #464545; } &__img { display: block; width: 100%; height: 100%; object-fit: fill; object-position: center; position: absolute; top: 0; left: 0; } }