*, *::before, *::after {
    box-sizing: border-box;
}

* {
    margin: 0;
}

html, body {
    min-height: 100%;
}

body {
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}
  
img, picture, video, canvas, svg {
    display: block;
    max-width: 100%;
}

input, button, textarea, select {
    font: inherit;
}

p, h1, h2, h3, h4, h5, h6 {
    overflow-wrap: break-word;
}

#root, #__next {
    isolation: isolate;
}

ul {
    list-style: none;
    padding: 0px;
}
a {
    text-decoration: none;
}
  
  html {
    --font-sans-serif:
      -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui,
      helvetica neue, helvetica, Ubuntu, roboto, noto, arial, sans-serif;
    --font-serif:
      Iowan Old Style, Apple Garamond, Baskerville, Times New Roman,
      Droid Serif, Times, Source Serif Pro, serif, Apple Color Emoji,
      Segoe UI Emoji, Segoe UI Symbol;
    /* Set a global default */
    font-family: var(--font-sans-serif);
  }

body {
    background-image: linear-gradient(45deg, hsl(320deg, 100%, 100%), hsl(340deg, 100%, 50%), hsl(0deg, 100%, 100%));
}

body > * {
    padding: 0 1rem;
}

@media (orientation: landscape) {
    body > * {
        padding: 0 calc((100% - 1024px)/2);
    }    
}

[cols] {
    grid-auto-flow: column;
}

.cards {
    padding: 2rem;
    display: grid;
    gap: 2rem;
    grid-template-columns: 1fr;
    justify-content: center;
}

@media (orientation: landscape) {
    .cards {
        grid-template-columns: repeat(2, 1fr);
    }
}

.card {
    display: grid;
    gap: 1rem;
    padding: 1rem;
    background-color: white;
    box-shadow: 2px 2px 10px #e58181;
}
.card:hover {
    box-shadow: 2px 2px 10px #c50707;
}

header {
    font-size: 1.5rem;
}

.about {
    display: grid;
    padding: 2rem;
    background-color: whitesmoke;
    gap: 1.5rem;
}

.about > ul {
    list-style:circle;
    padding-left: 2rem;
}
.lang {
    /* background-color: lightgrey; */
}
.product {
    background-color: lightgrey;
}
.company {
    font-size: 1.1rem; 
    background-color: bisque;
}

a:link, a:visited{
    color: black;
}

@media print {
    nav {
        display: none !important;
    }
    body {
        background-image: none !important;
    }
    .about {
        background-color: white !important;
    }
}

#about_header {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    align-items: center;
}

@media (orientation: portrait){
    .landscape {
        display: none;
    }
    #about_header {
        grid-template-columns: 1fr;
    }
}