QR_Code_Mentor

Hello I saw your solution... I went to your site... saw your code... etc

Overall its like medium let me correct you...

1.the container should not be like that you should add that properties to body:

body{
    font-size: 15px;
    max-width: 1440px; 
    background-color:hsl(212, 45%, 89%) ;
    font-family: 'Outfit';
      }

.container{
            max-width: 1230px;
            height: 100%;
            display: flex;
            margin: 0 auto;
            justify-content: center;
            align-items: center;
        }

2.YOU SHOULDN'T DO MARGIN USING %!!! This ruins your whole structure on responsive:

card-container{
    background-color: hsl(0, 0%, 100%); 
    border-radius: 15px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

Here you dont need margin because you are already make container position it in center by display flex

3.Is text problem is in responsive text is shortened because you use % in margin... Instead you can:

card-container img{ border: 1px solid moccasin; width: 100%; border-radius: 10px; }

.primary{
     color:hsl(218, 44%, 22%);
     font-weight:700;
     width: here you can provide exact width and control text-align with it;
     font-size: 1.1rem;
}

.secondary{
    color:hsl(220, 15%, 55%);
    font-size: 15px;
    font-weight:400;
    font-size: 0.8rem;
    width: here you can provide exact width and control text-align with it;
}

I hope this helped you

I would appreciate it if you would mark this comment helpful!

Looks good, adding the attribution is an interesting idea I wouldn't have thought to do.