Después de revisar el código de la Fundación Zurb, noté que estaban usando un enfoque de CSS como este para permitir un div cuadrado adaptable:

.div{
    position:relative;
    width:33%;
    height:0;
    padding-bottom:33%;
}
.divInner{
    position:absolute;
    width:100%;
    height:100%;
}

He estado usando este enfoque en algunos proyectos más nuevos (aún en desarrollo privado), pero no conozco el soporte del navegador para eso o por qué la altura puede incluso imitar el tamaño del ancho. ¿Alguien sabe por qué pasa esto? ¡Gracias!