@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&display=swap');

* {
    box-sizing: border-box;
}
:root {
    --color-body: #FBFBFB;
    --color-body-hover: #E0E0E0;
    --color-primary-50:  #E3F0FF;
    --color-primary-100: #BFDFFF;
    --color-primary-200: #99CCFF;
    --color-primary-300: #66B3FF;
    --color-primary-400: #3399FF;
    --color-primary-500: #0068DE;
    --color-primary-600: #005EC5;
    --color-primary-700: #0051AD;
    --color-primary-800: #004494;
    --color-primary-900: #003377;
    --color-primary-950: #002255;
}
.landing-heroes-img {
    background: linear-gradient(to right, var(--color-primary-500) 0%, transparent 40%), url('/images/heroes-image-1.png');
    background-size: contain;
    background-position: right;
    background-repeat: no-repeat;
    aspect-ratio: 1312/1948;
}
.container {
    padding-left: 1rem;
    padding-right: 1rem;
}