portfolio/assets/styles/components/links.scss

.links-container {
    display: flex;
    justify-content: center;
}

.links {
    width: 80%;
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    .link-card {
        margin: 1em;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        min-width: 10em;
        transition: all 0.1s;
        &:hover {
            transform: scale(1.1);
        }
    }

    .link-card-title {
        margin-top: .9em;
    }

    .link-card-logo {
        padding: .5em;
        width: 4em;
        height: 4em;
        overflow: hidden;
        display: flex;
        justify-content: center;
        align-content: center;

        img {
            max-width: 4em;
            max-height: 4em;
        }
    }
}

@media (max-width: $sm-breakpoint) {
    .links {
        width: 100%;
        .link-card {
            justify-content: center;
        }

    }
}

@media (max-width: $xs-breakpoint) {
    .links {
        width: 100%;
        .link-card {
            min-width: 6em;
        }
    }
}