@import url('https://fonts.googleapis.com/css2?family=Inconsolata&family=Lora&display=swap');

@font-face {
	font-family: "SFPRO";
	src: url("../font/SFPRODISPLAYREGULAR.OTF") format("opentype");
  }

:root {
    --blue: #040404;
    --SFpro: 'SFPRO', sans-serif;
    --white: #FCFAF2;
    --gray:#D6D6D6;
    --dark-gray: #696969;
    --orange:#F6A70C;
    --black: #000000;
}

/* Type */
_::-webkit-full-page-media, _:future, :root body {
	font-family: var(--SFpro);
}

body {
    font-family: var(--SFpro);
    -webkit-text-size-adjust: 100%;
    -webkit-font-smoothing: antialiased;
}

* {
    line-height: 1.5;
}

h1, h2, h3, h4, h5, h6 
.h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: var(--SFpro);
    margin-bottom: 0.5rem;
    color: --var(--title-black);
}


h1, .h1 { font-size: 4.209rem }
h2, .h2 { font-size: 3.157rem }
h3, .h3 { font-size: 26px }
h4, .h4 { font-size: 26px }
h5, .h5 { font-size: 1.333rem }
h6, .h6 { font-size: 1rem }

h1,h2{
    text-align: center;
    font-size: 28px;
    letter-spacing: 4px;
    width: 90%;
    margin: 0 auto;
    margin-bottom: 38px;
}

@media (min-width: 360px) {
    h1,h2{
        font-size: 28px;
    }
}

@media (min-width: 500px) {
}

@media (min-width: 600px) {
    h1,h2{
        font-size: 30px;
    }
}

@media (min-width: 830px) {
       h3{
        font-size: 30px;
    }
}

h2.text-space{
    letter-spacing: 2px;
}

p{
    color: var(--text-black);
    font-size: 21px;
}

ul, li, a{
    font-family: var(--SFcompact);
}

header ul li a{
    text-transform: uppercase;
}

/* Layout */
section {
    padding: 2.5rem 0;
}

a {
    background-color: transparent;
  }
  
.container {
    margin: 0 auto;
    padding: 0 1rem;
}

.grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 1rem;
}

.col-1 { grid-column: span 1; }
.col-2 { grid-column: span 2; }
.col-3 { grid-column: span 3; }
.col-4 { grid-column: span 4; }
.col-5 { grid-column: span 5; }
.col-6 { grid-column: span 6; }
.col-7 { grid-column: span 7; }
.col-8 { grid-column: span 8; }
.col-9 { grid-column: span 9; }
.col-10 { grid-column: span 10; }
.col-11 { grid-column: span 11; }
.col-12 { grid-column: span 12; }

@media screen and (min-width: 568px) {
    
    .col-1-sm { grid-column: span 1; }
    .col-2-sm { grid-column: span 2; }
    .col-3-sm { grid-column: span 3; }
    .col-4-sm { grid-column: span 4; }
    .col-5-sm { grid-column: span 5; }
    .col-6-sm { grid-column: span 6; }
    .col-7-sm { grid-column: span 7; }
    .col-8-sm { grid-column: span 8; }
    .col-9-sm { grid-column: span 9; }
    .col-10-sm { grid-column: span 10; }
    .col-11-sm { grid-column: span 11; }
    .col-12-sm { grid-column: span 12; }
}

@media screen and (min-width: 834px) {
    
    .col-1-md { grid-column: span 1; }
    .col-2-md { grid-column: span 2; }
    .col-3-md { grid-column: span 3; }
    .col-4-md { grid-column: span 4; }
    .col-5-md { grid-column: span 5; }
    .col-6-md { grid-column: span 6; }
    .col-7-md { grid-column: span 7; }
    .col-8-md { grid-column: span 8; }
    .col-9-md { grid-column: span 9; }
    .col-10-md { grid-column: span 10; }
    .col-11-md { grid-column: span 11; }
    .col-12-md { grid-column: span 12; }
}

@media screen and (min-width: 1080px) {
    
    .col-1-lg { grid-column: span 1; }
    .col-2-lg { grid-column: span 2; }
    .col-3-lg { grid-column: span 3; }
    .col-4-lg { grid-column: span 4; }
    .col-5-lg { grid-column: span 5; }
    .col-6-lg { grid-column: span 6; }
    .col-7-lg { grid-column: span 7; }
    .col-8-lg { grid-column: span 8; }
    .col-9-lg { grid-column: span 9; }
    .col-10-lg { grid-column: span 10; }
    .col-11-lg { grid-column: span 11; }
    .col-12-lg { grid-column: span 12; }

}

/* Discipline Box */

.discipline-box {
    border-width: 1px;
    border-style: solid;
    border-color: var(--dark-gray);
}

.discipline-box__meta {
    padding: 0.33rem 1rem;
}

.discipline-box__title {
    background: var(--dark-gray);
    color: white;
    padding: 0.125rem 1rem 0.25rem;
}

.discipline-box__title .h4 {
    font-family: var(--serif);
    margin: 0;
}

.discipline-box__content {
    padding: 1.5rem 1rem;
}