Loopstudio Landing page using SCSS

What are you most proud of, and what would you do differently next time?

I am proud of learning how to use SCSS. I was able to create @mixin with condition using @if and variables. I was also also to use @content to define @mixin for mobile view.

@mixin mobile {
    @media (max-width: 768px) {
        @content;
    }
}

@mixin responsive-grid($columns, $rows: null) {
    @include display-grid($columns);

    @if $rows {
        grid-template-rows: repeat($rows, 1fr);
    }

    @include mobile {
        @include display-flex(space-between, column);
    }
}

What challenges did you encounter, and how did you overcome them?

I was facing some challenges with hover effect for image cards with text. Since I had applied opacity:0.3 to the whole card, the text would also have less opacity on hover. But I was able to fix the issue by applying opacity to only img tag:

.creation__card {
    position: relative;
    text-align: center;
    color: v.$white;
    cursor: pointer;
}

.creation__card img {
    transition: opacity 0.3s ease-in-out;
}

.creation__card:hover img,
.creation__card:focus img {
    opacity: 0.3;
}

.creation__card:hover .card__text,
.creation__card:focus .card__text {
    color: v.$black;
}

.card__text {
    position: absolute;
    bottom: 1%;
    left: 50%;
    transform: translate(-50%, -50%);
}

What specific areas of your project would you like help with?

SCSS & CSS methodologies