.cutko_gallery__grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(295px, 1fr));
row-gap: 3rem;
column-gap: .6rem;
align-items: start;
justify-items: center;
}
.cutko_gallery__grid .cutko-gallery__item {
position: relative;
width: 100%;
aspect-ratio: 1/1;
overflow: hidden;
transition: all 0.3s ease;
}
.cutko_gallery__grid .cutko-gallery__item:hover {
transform: scale(1.03) rotate(-3deg);
}
@media screen and (min-width: 1820px) {
.cutko_gallery__grid {
grid-template-columns: repeat(auto-fill, minmax(321px, 1fr));
}
}
@media screen and (max-width: 1819px) {
.cutko_gallery__grid {
grid-template-columns: repeat(auto-fill, minmax(285px, 1fr));
}
}
@media screen and (max-width: 1640px) {
.cutko_gallery__grid {
grid-template-columns: repeat(auto-fill, minmax(245px, 1fr));
}
}
@media screen and (max-width: 1519px) {
.cutko_gallery__grid {
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
}
}
@media screen and (max-width: 1419px) {
.cutko_gallery__grid {
grid-template-columns: repeat(auto-fill, minmax(209px, 1fr));
}
}
@media screen and (max-width: 1189px) {
.cutko_gallery__grid {
grid-template-columns: repeat(auto-fill, minmax(175px, 1fr));
}
}
@media screen and (max-width: 1000px) {
.cutko_gallery__grid {
grid-template-columns: repeat(auto-fill, minmax(145px, 1fr));
}
}
@media screen and (max-width: 834px) {
.cutko_gallery__grid {
grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
}
}
@media screen and (max-width: 768px) {
.cutko_gallery__grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media screen and (max-width: 480px) {
.cutko_gallery__grid {
grid-template-columns: 1fr;
}
}
.cutko_gallery__grid .cutko-gallery__item .cutko-gallery__item-img {
object-fit: cover;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
} .mask-gallery__item {
mask-size: contain;
-webkit-mask-size: contain;
mask-repeat: no-repeat;
-webkit-mask-repeat: no-repeat;
mask-position: center;
-webkit-mask-position: center;
}
.mask-1 {
mask-image: url(//obrovo.sk/wp-content/plugins/obrovo/assets/img/masky/maska01.svg);
-webkit-mask-image: url(//obrovo.sk/wp-content/plugins/obrovo/assets/img/masky/maska01.svg);
}
.mask-2 {
mask-image: url(//obrovo.sk/wp-content/plugins/obrovo/assets/img/masky/maska02.svg);
-webkit-mask-image: url(//obrovo.sk/wp-content/plugins/obrovo/assets/img/masky/maska02.svg);
}
.mask-3 {
mask-image: url(//obrovo.sk/wp-content/plugins/obrovo/assets/img/masky/maska03.svg);
-webkit-mask-image: url(//obrovo.sk/wp-content/plugins/obrovo/assets/img/masky/maska03.svg);
}
.mask-4 {
mask-image: url(//obrovo.sk/wp-content/plugins/obrovo/assets/img/masky/maska04.svg);
-webkit-mask-image: url(//obrovo.sk/wp-content/plugins/obrovo/assets/img/masky/maska04.svg);
}
.mask-5 {
mask-image: url(//obrovo.sk/wp-content/plugins/obrovo/assets/img/masky/maska05.svg);
-webkit-mask-image: url(//obrovo.sk/wp-content/plugins/obrovo/assets/img/masky/maska05.svg);
}
.mask-6 {
mask-image: url(//obrovo.sk/wp-content/plugins/obrovo/assets/img/masky/maska06.svg);
-webkit-mask-image: url(//obrovo.sk/wp-content/plugins/obrovo/assets/img/masky/maska06.svg);
}
.mask-7 {
mask-image: url(//obrovo.sk/wp-content/plugins/obrovo/assets/img/masky/maska07.svg);
-webkit-mask-image: url(//obrovo.sk/wp-content/plugins/obrovo/assets/img/masky/maska07.svg);
}
.mask-8 {
mask-image: url(//obrovo.sk/wp-content/plugins/obrovo/assets/img/masky/maska08.svg);
-webkit-mask-image: url(//obrovo.sk/wp-content/plugins/obrovo/assets/img/masky/maska08.svg);
}
.mask-9 {
mask-image: url(//obrovo.sk/wp-content/plugins/obrovo/assets/img/masky/maska09.svg);
-webkit-mask-image: url(//obrovo.sk/wp-content/plugins/obrovo/assets/img/masky/maska09.svg);
}
.mask-10 {
mask-image: url(//obrovo.sk/wp-content/plugins/obrovo/assets/img/masky/maska10.svg);
-webkit-mask-image: url(//obrovo.sk/wp-content/plugins/obrovo/assets/img/masky/maska10.svg);
} .cutko-header__title.cutko-galerie__title .img-podklad {
right: 17%;
max-width: 376px;
} .cutko-header__title > .wood__svg.position__wood {
right: 50%;
transform: translateX(141%);
}
@media screen and (max-width: 1280px) {
.cutko-header__title > .wood__svg.position__wood {
transform: translateX(50%);
}
}
@media screen and (max-width: 480px) {
.cutko-header__title > .wood__svg.position__wood {
height: 100%;
top: unset;
bottom: -60px;
transform: translate(50%, 0);
}
}