.link-box {
border: 1px solid var(--border-color-base--darker);
border-radius: var(--border-radius--medium);
background-color: var(--color-surface-1);
display: flex;
flex-flow: column;
justify-content: space-between;
}
.link-box-title {
padding: 1rem;
font-weight: var(--font-weight-bold);
font-size: var(--font-size-h3);
}
.link-box-text {
padding-left: 1rem;
padding-right: 1rem;
padding-bottom: 1rem;
}
.link-box-link {
text-align: center;
background-color: var(--color-primary);
border-radius: 0 0 var(--border-radius--medium) var(--border-radius--medium);
font-weight: var(--font-weight-medium);
}
.link-box-link a {
--color-link: var(--color-base--emphasized);
--color-link--hover: calculate(var(--color-base--emphasized) * 0.8);
display: block;
padding: 0.5rem !important;
}
.linkbox-wrapper {
display: flex;
gap: 10px;
flex-flow: wrap;
align-content: center;
align-items: stretch;
}
.linkbox-column-4 > .link-box {
flex: 1 1 21%;
}
.linkbox-column-3 > .link-box {
flex: 1 1 30%;
}
.linkbox-column-2 > .link-box {
flex: 1 1 48%;
}
@media(max-width: 555px) {
.linkbox-column-4 > .link-box {
flex: 1 1 100%;
}
.linkbox-column-3 > .link-box {
flex: 1 1 100%;
}
.linkbox-column-2 > .link-box {
flex: 1 1 100%;
}
}