@font-face {
    font-family: SanFranciscoBold;
    src: url(../font/SanFranciscoPro/SFProText-Bold.ttf);
}
@font-face {
    font-family: SanFranciscoMedium;
    src: url(../font/SanFranciscoPro/SFProText-Medium.ttf);
}
@font-face {
    font-family: SanFrancisco;
    src: url(../font/SanFranciscoPro/SFProText-Regular.ttf);
}
@font-face {
    font-family: SanFranciscoHeavy;
    src: url(../font/SanFranciscoPro/SFProText-Heavy.ttf);
}
@font-face {
    font-family: SanFranciscoLight;
    src: url(../font/SanFranciscoPro/SFProText-Light.ttf);
}
@font-face {
    font-family: SanFranciscoSemibold;
    src: url(../font/SanFranciscoPro/SFProText-Semibold.ttf);
}
@font-face {
    font-family: SanFranciscoBoldItalic;
    src: url(../font/SanFranciscoPro/SFProText-BoldItalic.ttf);
}
@font-face {
    font-family: SanFranciscoHeavyItalic;
    src: url(../font/SanFranciscoPro/SFProText-HeavyItalic.ttf);
}
@font-face {
    font-family: SanFranciscoLightItalic;
    src: url(../font/SanFranciscoPro/SFProText-LightItalic.ttf);
}
@font-face {
    font-family: SanFranciscoMediumItalic;
    src: url(../font/SanFranciscoPro/SFProText-MediumItalic.ttf);
}
@font-face {
    font-family: SanFranciscoRegularItalic;
    src: url(../font/SanFranciscoPro/SFProText-RegularItalic.ttf);
}
@font-face {
    font-family: SanFranciscoSemibildItalic;
    src: url(../font/SanFranciscoPro/SFProText-SemiboldItalic.ttf);
}
html{
    font-family: SanFrancisco , system-ui , sans-serif;
    font-size: 18px;
    letter-spacing: -0.01em;
    line-height: 1.1;
    background: #ffffff;
}
h1{
    letter-spacing: -0.07em;
}
h1 > span.decor{
   font-size: 61px;
   font-family: Inter-italic , sans-serif;
   background: linear-gradient(to right, #ea0, #082);
   background-clip: text;
   color: transparent;
}

#product > .grid > .block > img{
    transform: scale(0.86);
    width: 100%;
}
#product > .grid > .block:hover > img{
    animation: pulse 2s infinite;
}

.gallery-topscreen > img.center,
.gallery > img.center {
    display: flex;
    margin: 0 auto;
    margin-top: 12px;
    margin-bottom: 16px;
}

body.solid-image_grid > section.grid > div > img{
    border: unset;
    margin-left: 8px;
    width: calc(100% - 16px);
}

.grid-scroll > img , .grid-scroll > svg{
    background: #f0f0f0;
    aspect-ratio: 1 / 1;
    width: 100%;
    object-fit: contain;
    padding: 21px;
    border-radius: 12px;
    transform: scale(0.8);
}

@keyframes pulse {
    0%{transform: scale(0.86);}
    50%{transform: scale(0.91);}
    75%{transform: scale(0.84);}
    100%{transform: scale(0.86);}
}

@media screen and (min-width : 601px){
    div.grid.scroll {
        overflow-x: hidden;
    }
    .gallery-topscreen > img.center,
    .gallery > img.center {
        border-radius: 16px;
    }
    div.block > span{
        display: -webkit-box;-webkit-line-clamp: 3;-webkit-box-orient: vertical;overflow: hidden;text-overflow: ellipsis;
    }
    
    .gallery-card.scroll {
        overflow-y: hidden;
    }

    section#object > .gallery-card > div ,
    section#object > .gallery-card > div > img {
        aspect-ratio: 4 / 3;
    }

    section#object > .gallery-card > div > img {
        border-radius: 12px;
    }

    section#about > .gallery-card.scroll > img ,
    section#object > .gallery-card.scroll > img , 
    section#object > .gallery-card > div > img{
        height: 320px;
    }
}

@media screen and (max-width : 600px) {
    section#price > p ,
    section#price > span {
        padding-left: 8px;
        width: calc(100% - 16px);
    }

    body > h2{
        display: -webkit-box;-webkit-line-clamp: 3;-webkit-box-orient: vertical;overflow: hidden;text-overflow: ellipsis;
    }

    h1{
        font-size: 34px;
    }

    h1 > span.decor {
        font-size: 41px;
    }
    
    .header-address-mobile-hidden > header > address{
        display: none;
    }
}