/* --- Fonts --- */

/* SN Pro - Main */
@import url('https://fonts.googleapis.com/css2?family=SN+Pro:ital,wght@0,200..900;1,200..900&display=swap');


/* 
   Border box fits everything (content, margin, border, etc) into a defined width/height
   Otherwise, without it, content = width/height and padding, margin etc is extra on top
*/
* {
    box-sizing: border-box;
}

body {
    font-family: 'SN Pro', sans-serif;
    display: flex; /* So centering is easier */
    align-items: center; /* Align items = vertical */
    justify-content: center; /* Centres them horizontal */
    height: 100vh; /* height of 100vh takes up 100% of the browser screen */
}

.container {
    /* this auto displays as flex row */
    display: flex;
    width: 90vw;
    /* justify content centres horizontally */
    justify-content: center;
}

.panel {
    background-size: cover;
    background-position: center; /* we see center of image, eventhough we can't see whole image */
    background-repeat: no-repeat;
    height: 80vh;
    border-radius: 50px;
    color: #fff; /* color of text */
    cursor: pointer; /* when you hover over, curser turns to pointer */
    flex: 0.5; /* sets them all to same width, but when active, this changes */
    margin: 8px;
    position: relative; /* outter panel class is relative, so you can position h3's inside as absolute */
    transition: flex 0.7s ease-in;
}


.panel h3 {
    font-size: 24px;
    position: absolute;
    bottom: 20px;
    left: 20px;
    margin: 0;
    opacity: 0; /* makes them invisble by default */
}

.panel.active {
    flex: 5;
}

.panel.active h3 {
    opacity: 1;
    transition: opacity 0.3s ease-in 0.4s;
    /* On the panel that is now active, the transition effects the opacacite of the h3.
       You only see the h3 when the card is mostly expanded now.  */
}

@media(max-width: 480px) {
    .container {
        width: 100vh;    
    }

    .panel:nth-of-type(4),.panel:nth-of-type(5) { /* :nth-of-type(4) selects the 4th element*/
        display: none;
    }
}