@import "./reset.css";
@import "./fonts.css";
@import "./header.css";
@import "./home/index.css";
@import "./films/index.css";
@import "./music/index.css";
@import "./shop/index.css";
@import "./shop/details/index.css";
@import "./contact-us/index.css";
@import "./cart/index.css";

:root {
  --padding-x: calc(20 / 16 * 1rem);
  --padding-x-tablet: calc(40 / 16 * 1rem);
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: "NB International Pro", sans-serif;
}

.container {
  padding-inline: var(--padding-x);
  max-width: 1500px;
  margin: 0 auto;
}

#music,
#films,
#shop,
#contact-us {
  &::before {
    content: "";
    width: 100%;
    display: block;
    height: 60px;
  }
}

@media screen and (min-width: 768px) {
  #music,
  #films,
  #shop,
  #contact-us,
  #music {
    &::before {
      height: 85px;
    }
  }

  .container {
    padding-inline: var(--padding-x-tablet);
  }
}