.trial { padding: 8rem 0 0; color: $color-black; .btn__wrapper { text-align: center; } a { text-decoration: none; color: inherit; &:hover { color: $color-gray-darker; } } &__header { margin-bottom: 3rem; } &__grid { text-align: center; margin: 0 auto; } &__grid-items { height: 100%; width: 100%; display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: 30rem; grid-auto-rows: 30rem; grid-gap: 1rem; @include respond(470px) { grid-template-columns: 1fr; } } &__img-wrapper { position: relative; height: 100%; &:hover { cursor: pointer; } @include respond(470px) { height: 32rem; } } &__img { text-align: center; position: block; width: 90%; height: auto; margin: 5rem auto; } } .similar { padding: 5rem 5vw; // background-color: $color-bg; &__header { margin-bottom: 3rem; text-align: center; } &__grid-items { height: 100%; width: 100%; display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: 45rem; grid-auto-rows: 45rem; grid-gap: 1rem; @include respond(470px) { grid-template-columns: 1fr; } &--single { display: block; grid-template-rows: unset; grid-auto-rows: unset; grid-template-columns: unset; .similar__img-wrapper { height: auto; @include respond(470px) { height: auto; } } .similar__img { position: static; display: block; width: 100%; height: auto; } } } &__img-wrapper { position: relative; height: 100%; @include respond(470px) { height: 32rem; } } &__img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: contain; object-position: center; } } .swiper { &-container { width: 100%; height: 80vh; margin: 3rem auto; &--product { height: 80vh; @include respond(810px) { height: 60rem; } @include respond(670px) { height: 50rem; } @include respond(420px) { height: 40rem; } @include respond(350px) { height: 35rem; } } &--home { height: 90vh; margin: 8rem 0 3rem; @include respond(1270px) { height: 70rem; } @include respond(880px) { height: 60rem; } @include respond(680px) { height: 50rem; } @include respond(540px) { height: 40rem; } @include respond(450px) { height: 35rem; } @include respond(370px) { height: 25rem; margin: 8rem 0 0; } .swiper-img { width: 100%; height: 100%; object-fit: cover; } } .swiper-button-prev { padding: 1rem; margin-left: 1rem; } .swiper-button-next { padding: 1rem; margin-right: 1rem; } } &-wrapper { width: 100%; height: 100%; } &-slide { height: inherit; width: inherit; } &-img { display: block; width: 95%; height: 95%; margin: 0 auto; object-fit: contain; object-position: center; } &-button-next::after, &-button-prev::after { font-size: 3rem !important; color: $color-white; } &-button-next { right: -5px !important; left: auto !important; } &-button-prev { left: -5px !important; right: auto !important; } } .js-open-modal { cursor: pointer; &:hover { filter: contrast(120%) brightness(120%); } }