:root {
  --wrap: 1300px;
  --wide-wrap: 1600px;
  --narrow-wrap: 900px;
  --black: #000;
  --white: #fff;
  --primary: hsl(203, 98%, 38%);
  --primary-hover: hsl(203, 98%, 45%);
  --secondary: hsl(203, 100%, 18%);
  --secondary-hover: hsl(203, 100%, 26%);
  --accent: hsl(0, 100%, 42%);
  --accent-hover: hsl(0, 100%, 47%);
  --accent2: hsl(203, 70%, 80%);
  --light-grey: #ecf1f7;
  --grey: #3A3A3A;
  --korostus: var(--primary);
  --korostus2: var(--primary);
  --btn-color: var(--primary);
  --btn-color2: var(--primary-hover);
  --gradient1: linear-gradient(135deg, var(--primary) -20%, var(--secondary) 10%, var(--secondary), hsl(203deg 100% 12.67%) 40%, var(--secondary), hsl(202.89deg 100% 26.85%) 80%, var(--secondary) 120%);
  --gradient2: radial-gradient(circle at 50% 0%, var(--primary) 0%, transparent 60%), linear-gradient(135deg, var(--primary) -20%, var(--secondary) 10%, var(--secondary), color-mix(in srgb, var(--secondary) 60%, var(--primary) 40%) 46%, var(--secondary), var(--primary) 120%);
  --gradient3: radial-gradient(circle at 50% 120%, var(--primary) 0%, var(--secondary) 60%);
  --gradient4: linear-gradient(90deg, var(--primary) -80%, var(--secondary) 180%);
  --footer-bg: #f5f5f5;
  --copy-bg: var(--primary);
  --primary-filter: invert(27%) sepia(80%) saturate(1441%) hue-rotate(179deg) brightness(105%) contrast(98%);
  --secondary-filter: invert(74%) sepia(11%) saturate(1631%) hue-rotate(28deg) brightness(91%) contrast(85%);
  --body-font: 'Montserrat', sans-serif;
  --title-font: 'Montserrat', sans-serif;
  --base-font-size: 17px;
  --gap: 25px;
  --column-gap: calc(1.5 * var(--gap));
}
.main-container h2,
.edit-post-visual-editor h2{
  --font-size: 3em;
  font-weight: 800;
}
h3{
  --font-size: 2.25em;
}
h4{
  --font-size: 1.625em;
}
.main-container h2, .main-container h3, .main-container h4,
.edit-post-visual-editor h2, .edit-post-visual-editor h3, .edit-post-visual-editor h4{
  font-size: var(--font-size);
}
h2, h3, h4{
  --wp--preset--font-size--small: calc(var(--font-size) * 0.85);
  --wp--preset--font-size--normal: var(--font-size);
  --wp--preset--font-size--medium: calc(var(--font-size) + 0.5em);
  --wp--preset--font-size--large: calc(var(--font-size) + 1em);
}
p,
.edit-post-visual-editor p{
  line-height: 1.6;
  --wp--preset--font-size--small: 0.85em;
  --wp--preset--font-size--normal: 1em;
  --wp--preset--font-size--medium: 1.25em;
  --wp--preset--font-size--large: 1.5em;
}
.wp-block-button{
  --wp--preset--font-size--medium: min(1.2em, 19px);
}

.wp-block-group{
  --wp--style--global--content-size: var(--wrap);
}
.wp-block-group.is-style-narrow-width{
  --wp--style--global--content-size: var(--narrow-wrap);
}
.wp-block-group.is-style-wide-width{
  --wp--style--global--content-size: var(--wide-wrap);
}
.wp-block-group.is-style-full-width{
  --wp--style--global--content-size: 100%;
}

/* https://codepen.io/sosuke/pen/Pjoqqp */
.primary-filter{
  filter: var(--primary-filter);
}
.secondary-filter{
  filter: var(--secondary-filter);
}


.has-background:not(.has-light-grey-background-color) *:not(select):not(input):not(textarea):not(.components-placeholder){
  color:inherit;
}
.has-black-background-color{
  background: var(--black);
  color: var(--white);
}

.has-primary-background-color{
  background: var(--primary);
  color: var(--white);
}
.has-secondary-background-color{
  background: var(--secondary);
  color: var(--white);
}
.has-accent-background-color{
  background: var(--accent);
  color: var(--white);
}

.has-light-grey-background-color{
    background: var(--light-grey);
}

.has-grey-background-color{
    background: var(--grey);
}

.has-primary-color.has-text-color{
  color: var(--primary);
}
.has-secondary-color{
  color: var(--secondary);
}

.has-white-text-color{
  color: var(--white);
}
.wp-block-buttons{
  column-gap: 1em;
}
.wp-block-button__link{
  border-radius: 5px;
  background: var(--btn-color);
  color: var(--white);
  border: 0;
}
.has-white-background-color.wp-block-button__link{
  background: var(--white);
  color: var(--btn-color);
}
.wp-block-button__link:hover{
  background: var(--btn-color2);
}
.has-secondary-background-color.wp-block-button__link:hover{
  background: var(--secondary-hover) !important;
}
.has-accent-background-color.wp-block-button__link:hover{
  background: var(--accent-hover) !important;
}
.has-white-background-color.wp-block-button__link:hover{
  background: var(--light-grey) !important;
}

.wp-block-button.is-style-outline .wp-block-button__link{
  --border-color: var(--btn-color);
  box-shadow: inset 0 0 0 2px var(--border-color);
  color: var(--border-color);
  background: transparent;
}
.wp-block-button.is-style-outline .has-background.wp-block-button__link{
  background: none !important;
  color: var(--border-color);
}
.wp-block-button.is-style-outline .wp-block-button__link:hover{
  background: var(--border-color);
  color: var(--white);
}
.has-background:not(.has-light-grey-background-color) .wp-block-button.is-style-outline .wp-block-button__link{
  --border-color: var(--white);
}
.has-background:not(.has-light-grey-background-color) .wp-block-button.is-style-outline .wp-block-button__link:hover{
  color: var(--btn-color);
}
.wp-block-button.is-style-outline .has-primary-background-color.wp-block-button__link{
  --border-color: var(--primary) !important;
}
.wp-block-button.is-style-outline .has-secondary-background-color.wp-block-button__link{
  --border-color: var(--secondary) !important;
}
.wp-block-button.is-style-outline .has-accent-background-color.wp-block-button__link{
  --border-color: var(--accent) !important;
}
.wp-block-button.is-style-outline .has-white-background-color.wp-block-button__link{
  --border-color: var(--white) !important;
}
.wp-block-button.is-style-outline .has-background:not(.has-white-background-color).wp-block-button__link:hover{
  background: var(--border-color) !important;
  --btn-color: var(--white);
  color: var(--btn-color);
}
.wp-block-button.is-style-outline .has-white-background-color.wp-block-button__link:hover{
  background: var(--border-color) !important;
}


.wp-block-cover.has-background-dim:not(.has-background-gradient):before{
  mix-blend-mode: multiply;
}

.wp-block-media-text:not(.is-style-small-pic){
  min-height: 380px;
}

.wp-block-columns[class*="columns-grid-"]{
  gap: 20px;
  gap: var(--gap, 25px);
  display: grid;
}
.wp-block-columns[class*="columns-grid-"] .wp-block-column{
  margin: 0 !important;
}
.wp-block-columns.columns-grid-3{
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}
.wp-block-columns.columns-grid-4{
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
}
@media (max-width: 700px) {
  .wp-block-columns[class*="columns-grid-"]{
    grid-template-columns: 1fr;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  }
}

figure.wp-block-image.is-style-aspect-ratio-16-9,
figure.wp-block-image.is-style-aspect-ratio-16-9-cover{
  aspect-ratio: 16/9;
  width: 100%;
}

figure.wp-block-image.is-style-aspect-ratio-16-9 img,
figure.wp-block-image.is-style-aspect-ratio-16-9-cover img{
  object-fit: contain;
  height: 150px;
  width: 100%;
}
figure.wp-block-image.is-style-aspect-ratio-16-9 img{
  /* jos halutaan left align */
  /* width: auto;  */
}

figure.wp-block-image.is-style-aspect-ratio-16-9 .components-resizable-box__container,
figure.wp-block-image.is-style-aspect-ratio-16-9-cover .components-resizable-box__container{
  width: 100%;
  aspect-ratio: 16/9;
  height: 100% !important;
}

@supports (aspect-ratio: 16/9){
  figure.wp-block-image.is-style-aspect-ratio-16-9 img,
  figure.wp-block-image.is-style-aspect-ratio-16-9-cover img{
    height: 100%;
  }
}
figure.wp-block-image.is-style-aspect-ratio-16-9-cover img{
  object-fit: cover;
}


.wp-block-separator:not(.has-text-color) {
  border: none;
  background: linear-gradient(90deg, transparent, var(--primary), #015a91, var(--primary), transparent);
  height: 1px;
}

.has-gradient1-gradient-background{
  background: var(--gradient1);
}
.has-gradient2-gradient-background{
  background: var(--gradient2);
}
.has-gradient3-gradient-background{
  background: var(--gradient3);
}
.has-gradient4-gradient-background{
  background: var(--gradient4);
}