.ic2-mosaic{
  display:grid;
  width:1228px;
  max-width:100%;
  margin-inline:auto;
  grid-template-columns:505px 386px 313px;
  grid-template-rows:320px 220px 230px;
  grid-template-areas:
    "feature phone airpods"
    "feature ipad airpods"
    "macbook macbook airpods";
  gap:12px;
  align-items:stretch;
  justify-content:center;
}

.ic2-tile{
  position:relative;
  min-width:0;
  min-height:0;
  overflow:hidden;
  isolation:isolate;
  border:1px solid rgba(120,102,72,.12);
  border-radius:14px;
  background:#fff;
  box-shadow:0 12px 30px rgba(24,19,10,.15),0 3px 10px rgba(24,19,10,.07);
}
.ic2-tile--feature{grid-area:feature;width:505px;height:552px}
.ic2-tile--phone{grid-area:phone;width:386px;height:320px}
.ic2-tile--ipad{grid-area:ipad;width:386px;height:220px}
.ic2-tile--airpods{grid-area:airpods;width:313px;height:794px}
.ic2-tile--macbook{grid-area:macbook;width:903px;height:230px}

.ic2-tile__media{
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  min-width:0!important;
  min-height:0!important;
  padding:0!important;
  margin:0!important;
  overflow:hidden!important;
  background:#fff!important;
  z-index:1;
}
.ic2-tile__media>.ic-owner-media-image,
.ic2-tile__media>.ic-landing-media-image{
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  max-width:none!important;
  padding:0!important;
  margin:0!important;
  object-fit:cover!important;
  object-position:center center!important;
  z-index:1!important;
}
.ic2-tile__media>.ic-media-placeholder{
  position:absolute!important;
  inset:0!important;
  z-index:2!important;
}
.ic2-tile__media.has-media>.ic-media-placeholder{display:none!important}

.ic2-tile__label{
  position:absolute;
  top:24px;
  left:28px;
  right:28px;
  z-index:5;
  pointer-events:none;
  color:#171717;
}
.ic2-tile__eyebrow{
  display:block;
  margin-bottom:7px;
  color:var(--ic-gold);
  font-family:var(--ic-sans);
  font-size:10px;
  font-weight:700;
  letter-spacing:.16em;
  text-transform:uppercase;
}
.ic2-tile__title{
  margin:0;
  font-family:var(--ic-serif);
  font-size:22px;
  line-height:1.08;
  font-weight:500;
  letter-spacing:-.025em;
}

@media(hover:hover) and (pointer:fine) and (min-width:641px){
  .ic2-tile__media>.ic-owner-media-image,
  .ic2-tile__media>.ic-landing-media-image{
    transition:transform 220ms cubic-bezier(.2,.7,.2,1);
    transform:scale(1);
    will-change:transform;
  }
  .ic2-tile:hover .ic2-tile__media>.ic-owner-media-image,
  .ic2-tile:hover .ic2-tile__media>.ic-landing-media-image{
    transform:scale(1.035);
  }
}

.ic2-tile .ic-owner-media-controls{
  position:absolute!important;
  right:14px!important;
  bottom:14px!important;
  left:auto!important;
  top:auto!important;
  z-index:20!important;
  width:auto!important;
  max-width:calc(100% - 28px)!important;
}

@media(max-width:1292px) and (min-width:641px){
  .ic2-mosaic{
    width:100%;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    grid-template-rows:360px 250px 250px 260px;
    grid-template-areas:
      "feature feature"
      "phone ipad"
      "macbook airpods"
      "macbook airpods";
  }
  .ic2-tile--feature,.ic2-tile--phone,.ic2-tile--ipad,.ic2-tile--airpods,.ic2-tile--macbook{width:auto;height:auto}
}

@media(max-width:640px){
  .ic2-mosaic{
    width:100%;
    max-width:100%;
    aspect-ratio:1228 / 794;
    grid-template-columns:505fr 386fr 313fr;
    grid-template-rows:320fr 220fr 230fr;
    grid-template-areas:
      "feature phone airpods"
      "feature ipad airpods"
      "macbook macbook airpods";
    gap:4px;
    align-items:stretch;
    justify-content:stretch;
  }
  .ic2-tile--feature,.ic2-tile--phone,.ic2-tile--ipad,.ic2-tile--airpods,.ic2-tile--macbook{
    width:auto;
    height:auto;
    min-height:0;
  }
  .ic2-tile{
    border-radius:7px;
    box-shadow:0 5px 13px rgba(24,19,10,.14),0 1px 4px rgba(24,19,10,.08);
  }
  .ic2-tile__label{
    top:7px;
    left:8px;
    right:8px;
  }
  .ic2-tile__eyebrow{
    margin-bottom:2px;
    font-size:5px;
    letter-spacing:.11em;
  }
  .ic2-tile__title{
    font-size:clamp(8px,2.7vw,12px);
    line-height:1.04;
  }
  .ic2-tile .ic-owner-media-controls{
    right:4px!important;
    bottom:4px!important;
    transform:scale(.62);
    transform-origin:right bottom;
    max-width:160%!important;
  }
}

@media(max-width:390px){
  .ic2-mosaic{gap:3px}
  .ic2-tile{border-radius:6px}
  .ic2-tile__label{top:6px;left:6px;right:6px}
  .ic2-tile__title{font-size:clamp(7px,2.55vw,10px)}
  .ic2-tile__eyebrow{font-size:4.5px}
}
