:root {
    --Blue: hsl(228, 45%, 44%);
    --Gold-500: hsl(31, 77%, 52%);
    --Cyan-800: hsl(184, 100%, 22%);
    --Green-950: hsl(179, 100%, 13%);
    --Transparent-white: hsla(0, 0%, 100%, 0.75); /* (paragraphs)*/
    --Gray-100: hsl(0, 0%, 95%); /*(background, headings, buttons)*/
}

* {
    box-sizing: border-box;
}

body {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-height: 100vh;
    width: 100%;
    background-color: var(--Gray-100);
    font-family: 'Lexend Deca', sans-serif;
    font-weight: 400;
    margin: 0 auto;    
    gap: 0.5rem;
}

img {
    width: 4rem;
    height: auto;
    object-fit: cover;    /* Zabezpečí, že sa obrázok pri zmene pomeru nezdeformuje */
    margin: 0;
    padding-block-end: 2.15rem;  
}

h1 {
    font-family: 'Big Shoulders Display', sans-serif;
    font-weight: 700;
    font-size: 2.5rem;
    color: var(--Gray-100);
    margin: 0;
}

p {
    padding-block-start: 0.6rem;
    padding-block-end: clamp(0.5rem, calc(-0.768rem + 5.408vw), 4.1rem); 
    color: var(--Transparent-white);
    font-family: 'Lexend Deca', sans-serif;
    font-size: 0.9375rem;
    font-weight: 400;
    line-height: 1.67;
}

.card {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    width: 100%;
    max-width: clamp(20rem, calc(7.387rem + 55.681vw), 57.5rem);
    border-radius: 0.5rem;
    margin-block-start: clamp(5.5rem, calc(3.669rem + 7.812vw), 10.7rem); /* 5.5rem at 375px -> 10.7rem at 1440px */
}

.card1, .card2, .card3 {
    display: flex;
    flex-direction: column;
    padding-inline: 3rem clamp(2.75rem, calc(2.662rem + 0.376vw), 3rem);
    padding-block: 3.05rem clamp(2.95rem, calc(3.018rem - 0.075vw), 2.9em);
}

.card1 {
    background-color: var(--Gold-500);
}

.card2 {
    background-color: var(--Cyan-800);
}

.card3 {
    background-color: var(--Green-950);
}

.card1 p {    
    letter-spacing: 0.0015rem;
}

.card2 p {
    letter-spacing: 0.0055rem;    
}

.card3 p {
    letter-spacing: 0.0015rem;    
}

.button1, .button2, .button3 {
    background-color: var(--Gray-100);
    border: 0.125rem solid;
    border-radius: 1.75rem;
    text-decoration: none;
    font-family: 'Lexend Deca', sans-serif;
    font-weight: 400;
    font-size: 0.9375rem;
    text-align: center;
    width: fit-content;
    min-width: 9.25rem;
    padding-block: 0.82rem 0.95rem;
    margin-block-start: auto;
    transition: all 0.3s ease;
}

.button1 {
    color: var(--Gold-500);  
    border-color: var(--Gold-500);
}

.button2 {
    color: var(--Cyan-800);   
    border-color: var(--Cyan-800); 
}

.button3 {
    color: var(--Green-950);  
    border-color: var(--Green-950);
}

.button1:hover, .button2:hover, .button3:hover {
    color: var(--Transparent-white);
    border: 0.125rem solid var(--Transparent-white);
}

.button1:hover {
    background-color: var(--Gold-500);  
}

.button2:hover {
    background-color: var(--Cyan-800);    
}

.button3:hover {
    background-color: var(--Green-950);  
}

.attribution { 
    font-size: 0.6875rem; 
    text-align: center; 
}

.attribution-link { 
    color: var(--Blue); 
}

@media (min-width: 48rem)  /* 48rem = 768px*/ {
   .card {
        flex-direction: row;
    }     

    .card1, .card2, .card3 {
        flex: 1;        
    }   
}