85 lines
1.7 KiB
SCSS
85 lines
1.7 KiB
SCSS
|
[data-template="store"] {
|
||
|
|
main {
|
||
|
|
margin-bottom: calc(var(--spacing) * 2);
|
||
|
|
}
|
||
|
|
|
||
|
|
.p__baseline-big {
|
||
|
|
margin-top: calc(var(--spacing) * 2);
|
||
|
|
}
|
||
|
|
|
||
|
|
#store__container {
|
||
|
|
margin-top: calc(var(--spacing) * 2);
|
||
|
|
margin-bottom: calc(var(--spacing) * 4);
|
||
|
|
width: 100%;
|
||
|
|
max-width: 1000px;
|
||
|
|
|
||
|
|
.store__product {
|
||
|
|
position: relative;
|
||
|
|
figure {
|
||
|
|
aspect-ratio: 4/3;
|
||
|
|
background-color: var(--color-bg);
|
||
|
|
background-color: var(--data-bg);
|
||
|
|
margin-bottom: calc(var(--spacing) * 0.5);
|
||
|
|
overflow: hidden;
|
||
|
|
}
|
||
|
|
img {
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
object-fit: contain;
|
||
|
|
transition: var(--curve) 0.5s;
|
||
|
|
}
|
||
|
|
|
||
|
|
a {
|
||
|
|
text-decoration: none;
|
||
|
|
}
|
||
|
|
|
||
|
|
.link-block {
|
||
|
|
display: block;
|
||
|
|
height: 100%;
|
||
|
|
width: 100%;
|
||
|
|
position: absolute;
|
||
|
|
top: 0;
|
||
|
|
left: 0;
|
||
|
|
cursor: pointer;
|
||
|
|
}
|
||
|
|
|
||
|
|
&:hover {
|
||
|
|
figure {
|
||
|
|
overflow: hidden;
|
||
|
|
}
|
||
|
|
img {
|
||
|
|
transform: scale(1.05);
|
||
|
|
}
|
||
|
|
|
||
|
|
.line-1 {
|
||
|
|
text-decoration: underline;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@media #{$small} {
|
||
|
|
.store__product {
|
||
|
|
margin-top: calc(var(--spacing) * 1.5);
|
||
|
|
margin-bottom: calc(var(--spacing) * 0.5);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@media #{$small-up} {
|
||
|
|
display: grid;
|
||
|
|
grid-template-columns: repeat(6, 1fr);
|
||
|
|
column-gap: calc(var(--padding-body) * 0.75);
|
||
|
|
row-gap: calc(var(--spacing) * 2);
|
||
|
|
margin-left: auto;
|
||
|
|
margin-right: auto;
|
||
|
|
|
||
|
|
.store__product {
|
||
|
|
grid-column: span 2;
|
||
|
|
}
|
||
|
|
.store__product:nth-of-type(1),
|
||
|
|
.store__product:nth-of-type(2) {
|
||
|
|
grid-column: span 3;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|