#page {
    width: 100%;
    background-image: url(/almondkouka/gallery/images/cloud.jpg);
    background-repeat: no-repeat;
    background-position: center 10%;
}
@media (max-width: 767px) {
    #page {
        background-size: 150%;
    }
}
.hero {
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}
@media (min-width: 768px) {
    .hero {
        padding-top: 6%;
    }
}
.hero .hash,
.hero .btn {
    margin-left: auto;
    margin-right: auto;
}

@media (max-width: 767px) {
    .hero .hash,
    .hero .btn {
        max-width: 100px;
    }
}
@media (min-width: 768px) {
    .hero .hash,
    .hero .btn {
        max-width: 150px;
    }
}

@media (max-width: 767px) {
    ul.garally.fx li {
        flex-basis: 50%;
    }
}
@media (min-width: 768px) {
    ul.garally.fx li {
        flex-basis: 33.3333%;
    }
}
ul.garally li figure {
    padding: 4rem;
    display: block;
}
ul.garally li figure a,
ul.garally li figure span {
    position: relative;
    display: block;
}
ul.garally li a i,
ul.garally li span i {
    position: absolute;
    pointer-events: none;
    z-index: 1;
    top: -2.5rem;
    left: -2.5rem;
    width: 5rem;
    height: 5rem;
}
ul.garally li a img,
ul.garally li span img {
    width: 100%;
    height: auto;
}
ul.garally li a:hover img {
    opacity: 0.8;
}