:root{
 --rose: #F2BAAE;
  --blue: #84A9CD;
  --accent: #4D7596;
  --lightBlue: #A9CEF4;
  --orange: #E9945E;
  --green: #95B3B5;
  --gray: #91A6B9;
  --strongGray: #6F6F72;
}

@font-face {
  font-family: "MontserratAlternates";
  src: url("../fonts/MontserratAlternates-Regular.ttf");
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: "MontserratAlternates";
  src: url("../fonts/MontserratAlternates-Medium.ttf");
  font-weight: 500;
  font-style: normal;
}
@font-face {
  font-family: "MontserratAlternates";
  src: url("../fonts/MontserratAlternates-Bold.ttf");
  font-weight: 700;
  font-style: normal;
}

@font-face {
  font-family: "Mulish";
  src: url("../fonts/Mulish-Bold.ttf");
  font-weight: 700;
  font-style: normal;
}

@font-face {
  font-family: "Mulish";
  src: url("../fonts/Mulish-Regular.ttf");
  font-weight: 400;
  font-style: normal;
}

body{
  font-family: 'MontserratAlternates',sans-serif;
  max-width: 100%;
  min-width: 320px;
  margin: 0 auto;
}
section{
  max-width: 1568px;
  margin: 0 auto;
  padding-left: 50px;
  padding-right: 50px;
}
.section_title{
  font-size: clamp(1.75rem, 1.493rem + 0.84vw, 2.5rem);
  font-weight: 700;
  line-height: clamp(2.313rem, 1.991rem + 1.05vw, 3.25rem);
  text-transform: uppercase;
  span {
    color: var(--orange);
  }
}
.image-compare:focus {
  outline: none;
  border: none;
}

@media (max-width: 490px) {
  section{
    padding-left: 16px;
    padding-right: 16px;
  }
}