@import url("https://fonts.googleapis.com/css2?family=Gelasio:ital,wght@0,400..700;1,400..700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Raleway:ital,wght@0,100..900;1,100..900&display=swap");

// Variables
$font-gelasio: "Gelasio", serif;
$font-raleway: "Raleway", sans-serif;

$color-primary: #ED1C24;
$color-brown: #9E1E0F;
$color-text: #151411;
$color-paragraph: #AFADB5;
$color-placeholder: #F9F9F9;
$color-line: #EDEDED;


// Mixins

// extends

body {
    font-size: 14px;
    font-family: $font-raleway;
}

%headings {
    color: $color-text;
    font-family: $font-gelasio;
    line-height: 130%;
    font-weight: 700;
}

%label {
    color: $color-text;
    font-family: $font-raleway;
    line-height: 130%;
    font-weight: 700;
}

%paragraph {
    color: $color-paragraph;
    font-family: $font-raleway;
    line-height: 180%;
    font-weight: 500;
}

h1, h2, h3, h4, h5, h6 {
    font-family: $font-gelasio;
}

h1 a {
    @extend %headings;
    font-size: 64px;
}

h2 a{
    @extend %headings;
    font-size: 44px;
}

h3 a{
    @extend %headings;
    font-size: 24px;
}

h4 a{
    @extend %headings;
    font-size: 20px;
}

h5 a{
    @extend %headings;
    font-size: 18px;
}

h6 a{
    @extend %headings;
    font-size: 16px;
}

h6.h6-plus a {
    @extend %headings;
    font-size: 14px;
    font-weight: 500;
}


label {
    &.label-l1 {
        @extend %label;
        font-size: 18px;
    }
    
    &.label-l2 {
        @extend %label;
        font-size: 16px;
    }
    
    &.label-l3 {
        @extend %label;
        font-size: 14px;
    }
}



p {
    &.paragraph-p1 {
        font-size: 18px;
    }

    &.paragraph-p2 {
        font-size: 16px;
    }

    &.paragraph-p2 {
        font-size: 14px;
    }
}

figure {
    margin: auto !important;
}

img {
    object-fit: cover!important;
}

.content {
    & p {
        @apply mb-2 font-arial  leading-160%;
    }

    & #title {
        @apply font-merriweather font-bold leading-150%;
    }

    & #intro, & #sub {
        @apply font-arial  font-medium leading-160%;
    }

    & audio {
        @apply w-full;
    }

    & document, & a, & custom-figure, & author {
        @apply cursor-pointer text-primary-600;
    }
}

div[layout="TYPE:Detail-LAYOUT:image"] {
    & p,& figure.align-center-image, & #sub, & #title, & #intro, & #breadcrumb, & #navigation__bottom {
        @apply lg:max-w-640px mx-auto;
    }
}

div[layout="ARTICLE_PAGE"] {
    & figure{
        @apply w-full items-center flex justify-center;
    }
}

.container-long {
    & .section_layout.grid {
        @apply md:gap-20px
    }
}

.container {
    max-width: 1385px;
}