/*** COLOR ***/
:root {
  --hue-primary: 250;
  
  /* base */
  --color-fg-base: hsl(250, 20%, 5%);
  --color-bg-base: hsl(250, 20%, 95%);
  --color-fg-subdued: hsl(250, 20%, 20%);
  --color-border-base: hsl(250, 20%, 80%);
  
  /* primary */
  --color-fg-primary: hsl(250, 60%, 40%);
  --color-bg-primary: hsl(250, 60%, 95%);
  
  /* accent */
  --color-border-accent: hsl(192, 70%, 50%);

  /* shadows - from light to dark */
  --color-shadow-01: hsla(250, 30%, 28%, 15%);
	--color-shadow-02: hsla(250, 30%, 28%, 25%);
}

/*** COLOR dark mode ***/
@media (prefers-color-scheme: dark) {
  :root {
  /* base */
  --color-fg-base: hsl(250, 20%, 95%);
  --color-bg-base: hsl(250, 20%, 5%);
  --color-fg-subdued: hsl(250, 20%, 80%);
  --color-border-base: hsl(250, 20%, 30%);
  
  /* primary */
  --color-fg-primary: hsl(250, 60%, 80%);
  --color-bg-primary: hsl(250, 40%, 15%);
    
  /* accent */
  --color-border-accent: hsl(192, 70%, 45%);

  /* shadows - from light to dark */
  --color-shadow-01: hsla(250, 30%, 0%, 95%);
	--color-shadow-02: hsla(250, 30%, 0%, 85%);
  }
}

/*** SIZING ***/
:root {
  /* corner radius */
  --size-radius-med: 12px;
	--size-radius-lrg: 16px;
  
  /* focus indicator */
  --size-gap-focus-indicator: 2px;
  --size-border-focus-indicator: 3px;
  --color-focus-indicator: hsl(190, 100%, 50%);

  /* component */
	--size-border-component: 1.5px;
  --size-gap-content-x-axis: 1.5rem;
}

/****** General Resets ******/
body {
	margin: 0;
	padding: 0;
	font-family: sans-serif;
	display: flex;
  flex-direction: column;
	min-height: 100vh;
	font-family: "Sarabun", serif;
  font-style: normal;
	 /* fix typography rough edges */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
	background-color: var(--color-bg-base);
  color: var(--color-fg-base);
}

img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  margin: 0 auto;
}

*,
div {
  box-sizing: border-box;
}

p {
  color: var(--color-fg-base);
  font-size: 1rem;
  margin: 0;
}

p:not(:last-child) {
    margin-block-end: 1rem;
  }




/*** Section Title with flag element ***/
.title {
  margin: 0;
  color: var(--color-fg-primary);
}
.title--section {
   --size-title-marker-vert: 10px;

   position: relative;
   padding-block-start: calc(var(--size-title-marker-vert) + 1rem);
   font-size: 3rem;
   margin-block-end: 1rem;
   }
.title--section::before {
       position: absolute;
       top: 0;
       left: 0;
       display: inline-block;
       content: "";
       block-size: var(--size-title-marker-vert);
       inline-size: 70px;
       background-color: var(--color-border-accent);
       border-radius: 5px;
       transform: translateX(-50%);
     }
.title--card {
    font-size: 1rem;
  }

/*** SECTION COMPONENT ***/
.section {
  min-inline-size: 100%;
  padding-block: 2rem;
  background-color: var(--color-bg-primary);
}
.section__header {
    margin-block: 3rem;
  }
.section__header .summary {
      padding-inline: var(--size-gap-content-x-axis);
    }
.section__container {
    position: relative;
    inline-size: 100%;
    margin-inline: auto;
    max-inline-size: 1200px;
    padding-inline: var(--size-gap-content-x-axis);
  }
/* here is the magic */
.section__row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  }


/*** CARD COMPONENT ***/
.card {
	--cardgroup-gap: 1.25rem;
  --size-card-accent-border: 9px;
	
  position: relative;
  overflow: hidden;
  margin-block: var(--cardgroup-gap);
  margin-inline: var(--cardgroup-gap);

  display: flex;
  flex-direction: column-reverse;
  align-items: flex-start;
	
	box-shadow: var(--color-shadow-01) 0px 6px 12px -2px, var(--color-shadow-02) 0px 3px 7px -3px;
  border-end-end-radius: var(--size-radius-lrg);
  border-end-start-radius: var(--size-radius-lrg);
  background-color: var(--color-bg-base);
  border: var(--size-border-component) solid var(--color-border-base);
  text-decoration: none;
  transition: all 0.5s cubic-bezier(.24, 0, .42, .99);
  
  /*** STATES ***/
}
.card::before {
    position: absolute;
    display: inline-block;
    top: calc(var(--size-border-component) * -1);
    left: calc(var(--size-border-component) * -1);
    right: 0;
    margin: auto;
    content: "";
    z-index: 2;
    width: calc(var(--size-border-component) * 2 + 100%);
    height: var(--size-card-accent-border);
    background-color: var(--color-border-accent);
  }
.card__content {
		padding: 1rem 1.5rem 1.25rem;
		gap: 0.5rem;
		display: flex;
    flex-direction: column;
    color: var(--em-color-fg-base);
	}
.card__image {
    position: relative;
    overflow: hidden;
    width: 100%;
    padding: 0;
  }
.card__image img {
      position: absolute;
      display: block;
      top: 0;
      left: 0;
      right: 0;
      height: 100%;
      width: 100%;
      -o-object-fit: cover;
      object-fit: cover;
      object-position: center;
    }
/* aspect ratio 2:1 */
.card__image::before {
      opacity: 0.6;
      position: relative;
      display: block;
      content: "";
      width: 100%;
      padding-block-start: 50%;
    }
/* hover */
.card:hover {
    box-shadow: none;
  }