@use "../themes/duckling/sass/_variables.scss" as vars;

h1,
h2,
h3,
h4,
h5,
h6 {
    font-weight: bold;
    font-family: var(--font-system-ui)
}

h1 {
    font-weight: 900;
    font-size: 3rem;
}

h2 {
    font-size: 2rem;
}

h3 {
    font-size: 1.5rem;
}

h4 {
    font-size: 1rem;
}

h5 {
    font-size: 0.75rem;
}

h6 {
    font-size: 0.5rem;
}

.logo {
    color: #EE2D75;
}

.pattern-images {
    display: flex;
    flex-wrap: wrap;
    justify-content: left;
    column-gap: 20px;
}

.pattern-images img {
    margin-left: 0px;
    margin-right: 0px;
    object-fit: cover;
    max-width: 48%;
}

@include vars.theme-variables using ($theme) {
    @if $theme == "dark" {
    	.banner-light {
    	    display: none;
    	}
    	.banner-dark {
    	    display: block;
    	}
    }
    @else {
        .banner-light {
            display: block;
        }
        .banner-dark {
            display: none;
        }
    }
}