/*
 * This is a manifest file that'll be compiled into application.css, which will include all the vader
 * listed below.
 *
 * Any CSS and SCSS file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS/SCSS
 * vader in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *
 */
/* line 3, app/assets/stylesheets/shop/plans.scss */
body {
  margin: 0;
}

/* line 7, app/assets/stylesheets/shop/plans.scss */
header {
  height: 108px;
  padding-left: 16px;
  display: flex;
  align-items: center;
}

@media screen and (max-width: 768px) {
  /* line 7, app/assets/stylesheets/shop/plans.scss */
  header {
    height: 80px;
  }
}

@media screen and (max-width: 478px) {
  /* line 7, app/assets/stylesheets/shop/plans.scss */
  header {
    height: 60px;
  }
}

/* line 21, app/assets/stylesheets/shop/plans.scss */
header .header-logo {
  height: 96px;
  margin-right: 16px;
  cursor: pointer;
}

/* line 26, app/assets/stylesheets/shop/plans.scss */
header .header-logo:hover {
  opacity: 0.7;
}

@media screen and (max-width: 768px) {
  /* line 21, app/assets/stylesheets/shop/plans.scss */
  header .header-logo {
    height: 80px;
  }
}

@media screen and (max-width: 478px) {
  /* line 21, app/assets/stylesheets/shop/plans.scss */
  header .header-logo {
    height: 56px;
  }
}

/* line 42, app/assets/stylesheets/shop/plans.scss */
main {
  max-width: 1200px;
  margin: 0 auto;
}

/* line 48, app/assets/stylesheets/shop/plans.scss */
.hero img {
  width: 100%;
  margin: auto;
}

/* line 54, app/assets/stylesheets/shop/plans.scss */
.list {
  display: flex;
  flex-wrap: wrap;
  list-style-type: none;
  margin: 24px 0;
  padding: 0;
}

@media screen and (max-width: 478px) {
  /* line 54, app/assets/stylesheets/shop/plans.scss */
  .list {
    margin: 16px 0;
  }
}

/* line 65, app/assets/stylesheets/shop/plans.scss */
.list__item {
  width: calc(100% / 3 - 16px);
  margin: 16px 8px;
}

@media screen and (max-width: 768px) {
  /* line 65, app/assets/stylesheets/shop/plans.scss */
  .list__item {
    width: calc(50% - 16px);
  }
}

@media screen and (max-width: 478px) {
  /* line 65, app/assets/stylesheets/shop/plans.scss */
  .list__item {
    width: 100%;
  }
}

/* line 77, app/assets/stylesheets/shop/plans.scss */
.list__item img {
  width: 100%;
  height: auto;
  object-fit: contain;
}

/* line 82, app/assets/stylesheets/shop/plans.scss */
.list__item img:hover {
  opacity: 0.7;
}

/* line 89, app/assets/stylesheets/shop/plans.scss */
footer {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 80px;
  font-size: 20px;
  font-weight: bold;
}

@media screen and (max-width: 478px) {
  /* line 89, app/assets/stylesheets/shop/plans.scss */
  footer {
    font-weight: normal;
    font-size: 14px;
  }
}