.content {
    display: flex;
    flex-direction: row;
    justify-content: center;
}

.homebtn {
    padding-block: var(--pad-600);
}

.surveys {
    padding-inline: var(--pad-400);
    list-style-type: none;
    flex-wrap: wrap;
    max-width: 100vw;
}

.survey {
    display: block;
    padding: var(--pad-800);
    align-self: center;
    align-items: center;
    align-content: center;
}

.survey .survey-content {
    display: flex;
    padding-block: var(--pad-400);
    padding-inline: var(--pad-600);
    background: var(--clr-primary-container);
    border-radius: var(--bdr-rad);
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: clamp(300px, 30vw, 500px);
    height: 15vh;
}

.survey .question {
    flex-grow: 1;
    align-content: center;
}

.survey a {
    color: var(--clr-on-primary-container);
    text-decoration: none;
    position: relative;
}

.survey a .icon {
    position: absolute;
    color: var(--clr-on-primary-container);
    right: var(--pad-400);
    top: calc(50% - .5em);
}

.categories {
    display: flex;
    flex-direction: row;
    max-height: 1em;
    justify-content: space-evenly;
    position: absolute;
    width: 100%;
    top: var(--pad-400);
}

.categories span {
    font-size: var(--fs-100);
    padding-inline: 0.8em;
    padding-block: 0.1em;
    background: var(--clr-accent);
    border-radius: var(--bdr-rad-400);
}

.survey .survey-content:hover + .icon {
  filter: drop-shadow(3px 5px 2px rgb(0 0 0 / 0.4));
  transition: filter 0.3s;
}
.survey-content:hover {
  box-shadow: inset 0 0 0.5em 0 var(--clr-surface);
  transition: box-shadow 0.3s;
}
.survey .survey-content:not(:hover) + .icon {
  transition: filter 0.3s;
}
.survey-content:not(:hover) {
  transition: box-shadow 0.3s;
}