body {
counter-reset: anchors-counter;
}
.ancres {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-gap: 1em;
}
.ancres .anchor-wrapper {
overflow: hidden;
position: relative;
border: solid var(--border-width-default) var(--color-grey-light);
border-radius: var(--border-radius);
min-height: 8em;
counter-increment: anchors-counter;
}
.ancres .anchor-wrapper .anchor-title {
color: var(--color-accent);
margin: 0;
line-height: 1.2;
}
.ancres .anchor-wrapper .go-corner {
display: flex;
align-items: center;
justify-content: center;
position: absolute;
width: 3.5em;
height: 3.5em;
overflow: hidden;
top: -0.5em;
left: -0.5em;
background-color: var(--color-main);
border-radius: 50%;
}
.ancres .anchor-wrapper .go-corner::before {
content: counter(anchors-counter);
color: var(--color-white);
font-family: var(--font-title);
font-size: var(--font-size-4);
}
.ancres .anchor-wrapper:hover {
transition: var(--transition-fast);
border-color: var(--color-accent-light);
}
.ancres .anchor-wrapper:hover .go-corner {
transition: var(--transition-fast);
background-color: var(--color-accent-hover);
}
.ancres .anchor-wrapper:hover .anchor-title {
transition: var(--transition-fast);
color: var(--color-accent-hover);
}
@media only screen and (max-width: 1200px) {
.ancres {
grid-template-columns: repeat(2, 1fr);
}
}
@media only screen and (max-width: 688px) {
.ancres {
grid-template-columns: repeat(1, 1fr);
}
}