@use '../utilities' as *;

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

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    overflow-x: hidden;
}

.wrapper {
    width: 1070px;
    max-width: 85%;
    margin: 0 auto;
}

.wrapper.large {
    width: 1400px;
    max-width: 95%;
    margin: 0 auto;
}

.container {
    width: 1070px;
    max-width: 85%;
    margin: 0 auto;
}

.container.large {
    width: 1400px;
    max-width: 95%;
    margin: 0 auto;
}

@media(max-width: 768px) {
    .wrapper,
    .container {
        width: 1200px;
        max-width: 90%;
        margin: 0 auto;
    }
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: "Playfair Display", Georgia, "Times New Roman", serif;
}

.display-4 {
    font-size: 2.5rem;
}

@media (min-width: 768px) {
    .display-4 {
        font-size: 3rem;
    }
}

.separator {
    padding: 4px 0;
}

.sep {
    padding: 0 2px;
}

a {
    text-decoration: none;
    transition: .2s ease-in-out;
}

.widget-banner .img-container a,
.home-grid .img-container a,
.widget .img-container a {
    display: block;
}

a.post-thumbnail {
    display: block !important;
}

.img-container a:focus,
.img-container a:focus-visible,
a.post-thumbnail:focus,
a.post-thumbnail:focus-visible {
    outline: 2px solid currentColor !important;
}

.site-content a:hover,
.site-footer a:hover {
    color: $cyan !important;
}

.img-container img {
    width: 100%;
    max-width: 100%;
}

img {
    max-width: 100%;
}

.post,
.page {
    margin: 0;
}