remove aspect-ratio mixin, use CSS aspect-ratio

src/Resources/app/storefront/src/scss/_mixins.scss

@@ -7,33 +7,3 @@
 @mixin for-min-size($size) {
   @media screen and (min-width: $size) { @content; }
 }
-
-/**
- * Aspect ratio
- */
-@mixin aspect-ratio($width, $height, $float: false) {
-  position: relative;
-  @if $float {
-    overflow: hidden;
-    &:before {
-      display: table;
-      content: "";
-      padding-top: ($height / $width) * 100%;
-      float: left;
-    }
-  } @else {
-    &:before {
-      display: block;
-      content: "";
-      width: 100%;
-      padding-top: ($height / $width) * 100%;
-    }
-    > * {
-      position: absolute;
-      top: 0;
-      left: 0;
-      right: 0;
-      bottom: 0;
-    }
-  }
-}

src/Resources/app/storefront/src/scss/_product-box.scss

@@ -17,11 +17,19 @@
 
   .product-image-wrapper {
     padding: 1rem;
-    margin-bottom: 0.250rem;
     margin-bottom: 0;
-    @include aspect-ratio(1, 1);
+    aspect-ratio: 1 / 1;
     height: auto;
     flex: 0 0 auto;
+    position: relative;
+
+    > * {
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+    }
   }
 
   .awards {

src/Resources/app/storefront/src/scss/base.scss

@@ -19,9 +19,8 @@ strong {
 
   .head-hero {
     position: relative;
-    @include aspect-ratio(2500, 625, true);
+    aspect-ratio: 2500 / 625;
     background: url("../assets/layout/header_bg.jpg") 50% 50% no-repeat;
-    -webkit-background-size: cover;
     background-size: cover;
     min-height: 200px;
   }
@@ -66,7 +65,7 @@ strong {
   }
 
   .head-base-logo {
-    @include aspect-ratio(1, 1);
+    aspect-ratio: 1 / 1;
     z-index: 0;
     position: absolute;
     left: 50%;
@@ -89,6 +88,11 @@ strong {
       display: flex;
       align-items: center;
       justify-content: center;
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
     }
 
     img {