/* Stylesheet for cortetezze website */

@font-face {
  font-family: 'Roboto Flex';
  src:
    url("/fonts/RobotoFlex-VariableFont_GRAD,XOPQ,XTRA,YOPQ,YTAS,YTDE,YTFI,YTLC,YTUC,opsz,slnt,wdth,wght.woff2") format('woff2');
  font-weight: 100 1000;
}

@font-face {
  font-family: Jost;
  src:
    url("/fonts/Jost-VariableFont_wght.woff2") format('woff2');
  font-weight: 100 1000;
}

/* Website colors */
:root {
  --color-cork: #382319;
  --color-bunrnt-sienna: #EF5070;
  --color-danube: #6EA1DA;
  --color-cornflower-blue: #99C3EC;
}

/* Dynamic spacing system generated with Utopia */
/* @link https://utopia.fyi/space/calculator?c=360,18,1.2,1240,20,1.25,5,2,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12 */

:root {
  --space-3xs: clamp(0.3125rem, 0.3125rem + 0vw, 0.3125rem);
  --space-2xs: clamp(0.5625rem, 0.5369rem + 0.1136vw, 0.625rem);
  --space-xs: clamp(0.875rem, 0.8494rem + 0.1136vw, 0.9375rem);
  --space-s: clamp(1.125rem, 1.0739rem + 0.2273vw, 1.25rem);
  --space-m: clamp(1.6875rem, 1.6108rem + 0.3409vw, 1.875rem);
  --space-l: clamp(2.25rem, 2.1477rem + 0.4545vw, 2.5rem);
  --space-xl: clamp(3.375rem, 3.2216rem + 0.6818vw, 3.75rem);
  --space-2xl: clamp(4.5rem, 4.2955rem + 0.9091vw, 5rem);
  --space-3xl: clamp(6.75rem, 6.4432rem + 1.3636vw, 7.5rem);

  /* One-up pairs */
  --space-3xs-2xs: clamp(0.3125rem, 0.1847rem + 0.5682vw, 0.625rem);
  --space-2xs-xs: clamp(0.5625rem, 0.4091rem + 0.6818vw, 0.9375rem);
  --space-xs-s: clamp(0.875rem, 0.7216rem + 0.6818vw, 1.25rem);
  --space-s-m: clamp(1.125rem, 0.8182rem + 1.3636vw, 1.875rem);
  --space-m-l: clamp(1.6875rem, 1.3551rem + 1.4773vw, 2.5rem);
  --space-l-xl: clamp(2.25rem, 1.6364rem + 2.7273vw, 3.75rem);
  --space-xl-2xl: clamp(3.375rem, 2.7102rem + 2.9545vw, 5rem);
  --space-2xl-3xl: clamp(4.5rem, 3.2727rem + 5.4545vw, 7.5rem);

  /* Custom pairs */
  --space-s-l: clamp(1.125rem, 0.5625rem + 2.5vw, 2.5rem);
}

/* Dynamic type system generated with Utopia */
/* @link https://utopia.fyi/type/calculator?c=360,18,1.2,1240,24,1.25,5,2,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12 */

:root {
  --step--2: clamp(0.7813rem, 0.7081rem + 0.325vw, 0.96rem);
  --step--1: clamp(0.9375rem, 0.8301rem + 0.4773vw, 1.2rem);
  --step-0: clamp(1.125rem, 0.9716rem + 0.6818vw, 1.5rem);
  --step-1: clamp(1.35rem, 1.1352rem + 0.9545vw, 1.875rem);
  --step-2: clamp(1.62rem, 1.3239rem + 1.3159vw, 2.3438rem);
  --step-3: clamp(1.944rem, 1.5408rem + 1.7922vw, 2.9297rem);
  --step-4: clamp(2.3328rem, 1.789rem + 2.4169vw, 3.6621rem);
  --step-5: clamp(2.7994rem, 2.0719rem + 3.2332vw, 4.5776rem);
}

html {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  font-size: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: 'Roboto Flex', sans-serif;
  font-weight: 400;
  line-height: 1.6;
  color: #2f3237;
  background-color: #ffffff;
  font-size: var(--step-0);
}

em {
  font-style: italic;
}

strong {
  font-family: "Roboto Flex", sans-serif;
}

mark {
  background: linear-gradient(-100deg, hsla(48, 92%, 75%, .3), hsla(48, 92%, 75%, .7) 95%, hsla(48, 92%, 75%, .1));
  border-radius: 1em 0;
  padding: .5rem;
}

h1,
h2,
h3,
h4,
h5 {
  font-family: Jost;
  font-weight: 400;
  /* text-transform: uppercase; */
  font-variant: small-caps;
  color: #2f3237;
  text-wrap: balance;
  margin: 0 0 var(--space-l) 0;
}

h1 {
  font-size: var(--step-5);
  font-weight: 600;
}

h2 {
  font-size: var(--step-4);
}

h3 {
  font-size: var(--step-2);
}

img {
  max-width: 100%;
  height: auto;
  vertical-align: middle;
  font-style: italic;
  /* shape-margin: var(--space-s-l); */
}

p,
li,
figcaption {
  max-width: 65ch;
}

header,
footer,
nav,
main,
section {
  padding-inline: var(--space-s);
}

section {
  margin-top: var(--space-2xl);
  margin-bottom: var(--space-xl);
  align-content: center;
}

.content-grid {
  display: inherit;
  /*
 display: grid;
  grid-template-columns: [full-start content-start first-half-start first-third-start] 1fr 1fr [first-third-end second-third-start] 1fr [first-half-end second-half-start] 1fr [second-third-end third-third-start] 1fr 1fr [third-third-end second-half-end content-end full-end];
*/
}

@media screen and (min-width: 900px) and (max-width: 1199px) {
  .content-grid {
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: [full-start content-start first-half-start first-third-start] 1fr 1fr [first-third-end second-third-start] 1fr [first-half-end second-half-start] 1fr [second-third-end third-third-start] 1fr 1fr [third-third-end second-half-end content-end full-end];
    grid-template-columns: [full-start content-start first-half-start first-third-start] 1fr 1fr [first-third-end second-third-start] 1fr [first-half-end second-half-start] 1fr [second-third-end third-third-start] 1fr 1fr [third-third-end second-half-end content-end full-end];
  }

  body>* {
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: subgrid;
    grid-template-columns: subgrid;
    grid-column: full-start / full-end;
  }
}

@media screen and (min-width: 1200px) {
  .content-grid {
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: [full-start] 1fr [content-start first-half-start first-third-start] 1fr 1fr [first-third-end second-third-start] 1fr [first-half-end second-half-start] 1fr [second-third-end third-third-start] 1fr 1fr [third-third-end second-half-end content-end] 1fr [full-end];
    grid-template-columns: [full-start] 1fr [content-start first-half-start first-third-start] 1fr 1fr [first-third-end second-third-start] 1fr [first-half-end second-half-start] 1fr [second-third-end third-third-start] 1fr 1fr [third-third-end second-half-end content-end] 1fr [full-end];
  }

  body>* {
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: subgrid;
    grid-template-columns: subgrid;
    grid-column: full-start / full-end;
  }
}

main>section {
  display: inherit;
  -ms-grid-columns: subgrid;
  grid-template-columns: subgrid;
  grid-column: full-start / full-end;
}

/*
@media screen and (min-width: 576px) {
.content-grid {
grid-template-columns: repeat(12, auto);
}
}
*/

header {
  grid-column: full-start / full-end;
  display: flex;
  flex-direction: row;
  background-color: #f0f0f0;
  background-image: url('../images/pictures/Panoramica_Tramonto_00_2048x758.webp');
  background-size: cover;
  background-repeat: no-repeat;
  background-position: right bottom;
  min-height: 30vh;
}

header>div {
  grid-column: content-start / content-end;
  -ms-grid-row: 1;
  grid-row: 1;
  -ms-grid-column-align: start;
      justify-self: start;
  -ms-grid-row-align: end;
      align-self: end;
  padding: var(--space-s);
}


header h1,
header p {
  margin: 0;
  color: #ffffff;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
}

.content {
  grid-column: content-start / content-end;
  -ms-grid-row: 1;
  grid-row: 1;
}

.first-half {
  grid-column: first-half-start / first-half-end;
  -ms-grid-row: 1;
  grid-row: 1;
}

.second-half {
  grid-column: second-half-start / second-half-end;
  -ms-grid-row: 1;
  grid-row: 1;
}

.first-two-thirds {
  grid-column: first-third-start / second-third-end;
  -ms-grid-row: 1;
  grid-row: 1;
}

.last-two-thirds {
  grid-column: second-third-start / third-third-end;
  -ms-grid-row: 1;
  grid-row: 1;
}

.first-third {
  grid-area: first-third;
  -ms-grid-row: 1;
  grid-row: 1;
}

.second-third {
  grid-area: second-third;
  -ms-grid-row: 1;
  grid-row: 1;
}

.last-third {
  grid-area: third-third;
  -ms-grid-row: 1;
  grid-row: 1;
}