.patterns > a {
    display: inline-block;
    vertical-align: top;
    box-sizing: border-box;
    width: 160px;
    text-decoration: none;
}

.patterns h4 { margin: 10px; }

.patterns > a:hover img {
    background-image: url(../img/patterns/hover.png);
    background-repeat: no-repeat;
    background-size: cover;
}

.gallery > div { padding: 10px; }

.gallery img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

@media (min-width: 640px) {
    .gallery { display: flex; }
}

@media (min-width: 640px) and (max-width: 959.999px) {
    .gallery > div {
        aspect-ratio: 1 / 1;
        flex: 1;
    }
}

@media (min-width: 960px) {
    .gallery > div:first-child {
        aspect-ratio: 1 / 1;
        flex: 1;
    }

    .gallery > div:last-child {
        aspect-ratio: 2 / 1;
        flex: 2;
    }
}

.info > div { padding: 0 20px; }

@media (min-width: 640px) {
    .info { display: flex; }
}

@media (min-width: 640px) and (max-width: 959.999px) {
    .info > div { flex: 1; }
}

@media (min-width: 960px) {
    .info > div:first-child { flex: 1; }

    .info > div:last-child { flex: 2; }
}

.lines {
    width: 130px;
    margin: 50px auto 0 auto;
}

.lines hr {
    width: 60px;
    height: 1px;
    border: none;
    display: inline-block;
    vertical-align: middle;
    background-color: var(--green);
}

.lines > span {
    border: 1px solid var(--green);
    padding: 2px;
    display: inline-block;
    vertical-align: middle;
    width: 3px;
    height: 3px;
    transform: rotate(45deg);
}