div:has(#bubble){display:flex;flex-direction:row}#bubble{width:40%}#bubble div{width:fit-content;margin-right:40px;margin-left:auto;padding:20px 40px 55px 100px;background-color:var(--clr-on-primary);border-radius:25px 25px 0;text-align:right;color:var(--clr-on-surface);box-shadow:3px 3px 5px -3px var(--clr-on-surface)}h1{margin:0;font-size:2.5em;font-weight:700;white-space:nowrap}#introduction{width:60%;margin:1.4em 0 0 40px}#introduction h2{font-weight:600;line-height:1.3em}@media only screen and (max-width: 1200px){#bubble{width:30%}#bubble div{padding:10px 20px 27px 50px}h1{font-size:2em}#introduction{width:70%}}@media only screen and (max-width: 900px){div:has(#bubble){flex-direction:column}#bubble div{margin-left:auto;margin-top:2em;padding:25px 45px 15px 30px;border-radius:25px 25px 25px 0;text-align:left;color:var(--clr-on-surface);box-shadow:3px 3px 5px -3px var(--clr-on-surface)}h1{font-size:2em;line-height:1.2em}#introduction{width:calc(100% - 30px);margin:1.2em 0 0;padding:0 30px}}.content-card{position:relative;width:40vw;max-width:560px;height:23vw;max-height:330px;padding:20px 0 0 25px;background-color:var(--clr-primary-container);border-radius:25px;text-decoration:none;box-shadow:2px 2px 15px -5px var(--clr-on-surface-variant)}.content-card h3{position:relative;margin:0;font-size:2em;line-height:1em;font-weight:700;color:var(--clr-on-primary-container);z-index:1;white-space:nowrap}.content-card img{position:absolute;height:50%;width:auto;right:20px;bottom:0}.content-card:hover{transform:scale(1.01);transition:.2s ease-in-out;box-shadow:2px 2px 15px -5px var(--clr-on-surface)}@media only screen and (max-width: 1200px){.content-card h3{font-size:4vw}}@media only screen and (max-width: 900px){.content-card{width:100%;height:50vw;margin-left:auto;margin-right:auto}.content-card h3{font-size:8vw}}
