portfolio/assets/styles/components/links.scss

61 lines
1.1 KiB
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;
}
}
}