@font-face {
   font-family: Inter;
   src: url(../../fonts/Inter/Inter-VariableFont_opsz\,wght.ttf);
   font-display: swap;
}

@font-face {
   font-family: Amiri;
   src: url(../../fonts/Amiri/Amiri-Regular.ttf);
   font-weight: 400;
   font-display: swap;
}
@font-face {
   font-family: Amiri;
   src: url(../../fonts/Amiri/Amiri-Italic.ttf);
   font-weight: 400;
   font-style: italic;
   font-display: swap;
}
@font-face {
   font-family: Amiri;
   src: url(../../fonts/Amiri/Amiri-Bold.ttf);
   font-weight: 700;
   font-display: swap;
}
@font-face {
   font-family: Amiri;
   src: url(../../fonts/Amiri/Amiri-BoldItalic.ttf);
   font-weight: 700;
   font-style: italic;
   font-display: swap;
}

/* -------------------------------------------------------------------------- */

:root {
   --color_primary : hsl(122, 90%, 20%);
   --card-shadow: 0 2px 6px -2px hsla(0, 0%, 0%, 0.2);
}

.bi::before,
[class^="bi-"]::before,
[class*=" bi-"]::before,
.info__more::after {
  display: inline-block;
  font-family: bootstrap-icons !important;
  font-style: normal;
  font-weight: normal !important;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  vertical-align: -.125em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a, input, button {
   all: unset;
}

* {
   padding: 0;
   margin: 0;
   box-sizing: border-box !important;
}

html {
   font-family: Inter, Amiri, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
   line-height: 1.75;
   letter-spacing: 0.05px;
   scroll-behavior: smooth;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   scroll-padding: 56px;
   color: hsl(122, 2%, 15%);
}
body {
   background-color: hsl(122, 5%, 97%);
   min-height: 100vh;
   min-height: 100dvh;
   display: flex;
   flex-direction: column;
   justify-content: space-between;
}

/* -------------------------------------------------------------------------- */

a {
   cursor: pointer;
}
h1, h2, h3, h4, h5, h6 {
   font-weight: bold;
   color: hsl(122, 2%, 10%);
   line-height: 1.2;
}

.a {
   color: var(--color_primary);
}
.a:hover {
   text-decoration: underline;
}

.button {
   display: inline-block;
   padding: 0.5em 0.75em;
   background-color: var(--color_primary);
   color: white;
   font-weight: 600;
   border-radius: 4px;
}

.hidden {
   display: none !important;
}
.no-scroll {
   overflow: hidden;
}

#breadcrumb {
   margin: 16px auto;
   font-size: 14px;
}

main {
   position: relative;
   padding-block: 16px;
   margin-top: 56px;
   height: 100%;
   width: 100%;
}

.max-width {
   padding-inline: 16px;
   margin-inline: auto;
   width: 100%;
}

@media screen and (width >= 768px) {
   .artikel_list > section{
      grid-template-columns: repeat(2, 1fr);
   }
   .artikel_list > a {
      width: 65%;
   }

   .article-list__list {
      grid-template-columns: repeat(2, 1fr);
   }
   .article-list__semua {
      width: 60%;
   }

   .max-width {
      max-width: calc(48rem + 24px * 2);
      padding-inline: 24px;
   }  
}

@media screen and (width >= 1024px) {
   .artikel_list > section {
      grid-template-columns: repeat(3, 1fr);
   }
   .artikel_list > a {
      width: 40%;
   }

   .article-list__list {
      grid-template-columns: repeat(3, 1fr);
   }
   .article-list__semua {
      width: 40%;
   }

   .max-width {
      max-width: calc(80rem + 32px * 2);
      padding-inline: 32px;
   }
}