$color-white: #ffffff;
$color-black: #252a32;
$color-light: #f1f5f8;
$color-red: #d32f2f;
$color-blue: #148cb8;

$box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 3px rgba(0, 0, 0, 0.24);

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  list-style: none;
  text-decoration: none;
	-moz-osx-font-smoothing: grayscale;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

body {
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  font-size: 1rem;
  font-weight: normal;
  line-height: 1.5;
  color: $color-black;
  background: $color-white;
}

.container {
  max-width: 75rem;
  width: 100%;
  padding: 4rem 2rem;
  margin: 0 auto;
}

.main {
  .container {
    .swiper-container {
      .swiper-wrapper {
        .swiper-slide {
          .card-image {
            background: $color-white;
            border: none;
            outline: none;
            box-shadow: $box-shadow;
            border-radius: 2px;

            img {
              display: block;
              position: relative;
              left: 0;
              bottom: 0;
              width: auto;
              height: auto;
              object-fit: cover;
            }
          }
        }
      }

      .swiper-pagination {
        &-bullet {
          opacity: 0.8;
          background: $color-black;
          &-active {
            background: $color-white;
          }
        }
      }

      .swiper-button-next,
      .swiper-button-prev {
        background-image: none;
        background-size: 0;
        background-repeat: no-repeat;
        background-position: 0;
        margin-top: -1rem;

        .arrow-icon {
          font-size: 2rem;
          color: $color-white;
        }
      }
    }
  }
}