nav.list { display:flex; flex-direction: row; flex-wrap: wrap; margin-left: 3em; align-content: flex-start; align-items: flex-start; width: 100%; h1 { width: 100%; font-size: 2.5em; color: $color-secondary; } a { width: 32em; margin-bottom: 1em; margin-right: 1em; color: inherit; text-decoration: none; transition: all 0.5s ease-in; text-align: center; h2 { font-size: 1.5em; } &:hover { .header { border-color: $color-primary; } .header::after { border-color: transparent $color-primary $color-primary transparent; } } .header { transition: background-color 0.25s ease-in, border-color 0.25s ease-in; padding: 1em; background-color: $color-bg-secondary; display: flex; flex-wrap: wrap; justify-content: center; position: relative; border-width: 1px; border-style: solid; border-color: $color-bg-secondary; &::after { transition: background-color 0.25s ease-in, border-color 0.25s ease-in; content: ""; width: $size-arrow; height: $size-arrow; background-color: #193441; position: absolute; bottom: -($size-arrow/2)-1px; left: 0px; right: 0px; margin-left: auto; margin-right: auto; transform: rotate(45deg); border-style: solid; border-color: #193441; border-width: 1px; } > * { width: 100%; } } img { width: 100%; max-height: 12em; object-fit: cover; } } }