.text-center {      text-align: center;                 }
.text-left {        text-align: left;                   }
.text-right {       text-align: right;                  }

.content-center {   justify-content: center;            }
.content-left {     justify-content: flex-start;        }
.content-right {    justify-content: flex-end;          }
.content-justify {  justify-content: space-between;     }
.content-padded {   justify-content: space-around;      }
.content-top {      align-content: flex-start;          }
.content-middle {   align-content: center;              }
.content-bottom {   align-content: flex-end;            }
.content-stretch {  align-content: stretch;             }

.items-center {     justify-items: center;              }
.items-left {       justify-items: flex-start;          }
.items-right {      justify-items: flex-end;            }
.items-justify {    justify-items: stretch;             }
.items-top {        align-items: flex-start;            }
.items-middle {     align-items: center;                }
.items-bottom {     align-items: flex-end;              }
.items-stretch {    align-items: stretch;               }

.self-left {        justify-self: flex-start;           }
.self-right {       justify-self: flex-end;             }
.self-center {      justify-self: center;               }
.self-justify {     justify-self:stretch;               }
.self-middle {      align-self: center;                 }
.self-top {         align-self: flex-start;             }
.self-bottom {      align-self: flex-end;               }
.self-stretch {     align-self: stretch;                }

.img-center {     --img-x: center;              }
.img-left {       --img-x: left;                }
.img-right {      --img-x: right;               }
.img-top {        --img-y: top;                 }
.img-middle {     --img-y: center;              }
.img-bottom {     --img-y: bottom;              }


@media (min-width: 576px)  { 
    .sm\:text-center {      text-align: center;                 } 
    .sm\:text-left {        text-align: left;                   } 
    .sm\:text-right {       text-align: right;                  } 

    .sm\:content-center {   justify-content: center;            }
    .sm\:content-left {     justify-content: flex-start;        }
    .sm\:content-right {    justify-content: flex-end;          }
    .sm\:content-justify {  justify-content: space-between;     }
    .sm\:content-padded {   justify-content: space-around;      }
    .sm\:content-top {      align-content: flex-start;          }
    .sm\:content-middle {   align-content: center;              }
    .sm\:content-bottom {   align-content: flex-end;            }
    .sm\:content-stretch {  align-content: stretch;             }

    .sm\:items-center {     justify-items: center;              }
    .sm\:items-left {       justify-items: flex-start;          }
    .sm\:items-right {      justify-items: flex-end;            }
    .sm\:items-justify {    justify-items: stretch;             }
    .sm\:items-top {        align-items: flex-start;            }
    .sm\:items-middle {     align-items: center;                }
    .sm\:items-bottom {     align-items: flex-end;              }
    .sm\:items-stretch {    align-items: stretch;               }

    .sm\:self-left {        justify-self: flex-start;           }
    .sm\:self-right {       justify-self: flex-end;             }
    .sm\:self-center {      justify-self: center;               }
    .sm\:self-justify {     justify-self:stretch;               }
    .sm\:self-middle {      align-self: center;                 }
    .sm\:self-top {         align-self: flex-start;             }
    .sm\:self-bottom {      align-self: flex-end;               }
    .sm\:self-stretch {     align-self: stretch;                }

    .sm\:img-center {     --img-x: center;              }
    .sm\:img-left {       --img-x: left;                }
    .sm\:img-right {      --img-x: right;               }
    .sm\:img-top {        --img-y: top;                 }
    .sm\:img-middle {     --img-y: center;              }
    .sm\:img-bottom {     --img-y: bottom;              }

}
@media (min-width: 768px)  { 
    .md\:text-center {      text-align: center;                 } 
    .md\:text-left {        text-align: left;                   } 
    .md\:text-right {       text-align: right;                  } 

    .md\:content-center {   justify-content: center;            }
    .md\:content-left {     justify-content: flex-start;        }
    .md\:content-right {    justify-content: flex-end;          }
    .md\:content-justify {  justify-content: space-between;     }
    .md\:content-padded {   justify-content: space-around;      }
    .md\:content-top {      align-content: flex-start;          }
    .md\:content-middle {   align-content: center;              }
    .md\:content-bottom {   align-content: flex-end;            }
    .md\:content-stretch {  align-content: stretch;             }

    .md\:items-center {     justify-items: center;              }
    .md\:items-left {       justify-items: flex-start;          }
    .md\:items-right {      justify-items: flex-end;            }
    .md\:items-justify {    justify-items: stretch;             }
    .md\:items-top {        align-items: flex-start;            }
    .md\:items-middle {     align-items: center;                }
    .md\:items-bottom {     align-items: flex-end;              }
    .md\:items-stretch {    align-items: stretch;               }

    .md\:self-left {        justify-self: flex-start;           }
    .md\:self-right {       justify-self: flex-end;             }
    .md\:self-center {      justify-self: center;               }
    .md\:self-justify {     justify-self:stretch;               }
    .md\:self-middle {      align-self: center;                 }
    .md\:self-top {         align-self: flex-start;             }
    .md\:self-bottom {      align-self: flex-end;               }
    .md\:self-stretch {     align-self: stretch;                }

    .md\:img-center {     --img-x: center;              }
    .md\:img-left {       --img-x: left;                }
    .md\:img-right {      --img-x: right;               }
    .md\:img-top {        --img-y: top;                 }
    .md\:img-middle {     --img-y: center;              }
    .md\:img-bottom {     --img-y: bottom;              }
}
@media (min-width: 1024px)  { 
    .lg\:text-center {      text-align: center;                 } 
    .lg\:text-left {        text-align: left;                   } 
    .lg\:text-right {       text-align: right;                  } 

    .lg\:content-center {   justify-content: center;            }
    .lg\:content-left {     justify-content: flex-start;        }
    .lg\:content-right {    justify-content: flex-end;          }
    .lg\:content-justify {  justify-content: space-between;     }
    .lg\:content-padded {   justify-content: space-around;      }
    .lg\:content-top {      align-content: flex-start;          }
    .lg\:content-middle {   align-content: center;              }
    .lg\:content-bottom {   align-content: flex-end;            }
    .lg\:content-stretch {  align-content: stretch;             }

    .lg\:items-center {     justify-items: center;              }
    .lg\:items-left {       justify-items: flex-start;          }
    .lg\:items-right {      justify-items: flex-end;            }
    .lg\:items-justify {    justify-items: stretch;             }
    .lg\:items-top {        align-items: flex-start;            }
    .lg\:items-middle {     align-items: center;                }
    .lg\:items-bottom {     align-items: flex-end;              }
    .lg\:items-stretch {    align-items: stretch;               }

    .lg\:self-left {        justify-self: flex-start;           }
    .lg\:self-right {       justify-self: flex-end;             }
    .lg\:self-center {      justify-self: center;               }
    .lg\:self-justify {     justify-self:stretch;               }
    .lg\:self-middle {      align-self: center;                 }
    .lg\:self-top {         align-self: flex-start;             }
    .lg\:self-bottom {      align-self: flex-end;               }
    .lg\:self-stretch {     align-self: stretch;                }

    .lg\:img-center {     --img-x: center;              }
    .lg\:img-left {       --img-x: left;                }
    .lg\:img-right {      --img-x: right;               }
    .lg\:img-top {        --img-y: top;                 }
    .lg\:img-middle {     --img-y: center;              }
    .lg\:img-bottom {     --img-y: bottom;              }
}
@media (min-width: 1280px)  { 
    .xl\:text-center {      text-align: center;                 } 
    .xl\:text-left {        text-align: left;                   } 
    .xl\:text-right {       text-align: right;                  } 

    .xl\:content-center {   justify-content: center;            }
    .xl\:content-left {     justify-content: flex-start;        }
    .xl\:content-right {    justify-content: flex-end;          }
    .xl\:content-justify {  justify-content: space-between;     }
    .xl\:content-padded {   justify-content: space-around;      }
    .xl\:content-top {      align-content: flex-start;          }
    .xl\:content-middle {   align-content: center;              }
    .xl\:content-bottom {   align-content: flex-end;            }
    .xl\:content-stretch {  align-content: stretch;             }

    .xl\:items-center {     justify-items: center;              }
    .xl\:items-left {       justify-items: flex-start;          }
    .xl\:items-right {      justify-items: flex-end;            }
    .xl\:items-justify {    justify-items: stretch;             }
    .xl\:items-top {        align-items: flex-start;            }
    .xl\:items-middle {     align-items: center;                }
    .xl\:items-bottom {     align-items: flex-end;              }
    .xl\:items-stretch {    align-items: stretch;               }

    .xl\:self-left {        justify-self: flex-start;           }
    .xl\:self-right {       justify-self: flex-end;             }
    .xl\:self-center {      justify-self: center;               }
    .xl\:self-justify {     justify-self:stretch;               }
    .xl\:self-middle {      align-self: center;                 }
    .xl\:self-top {         align-self: flex-start;             }
    .xl\:self-bottom {      align-self: flex-end;               }
    .xl\:self-stretch {     align-self: stretch;                }

    .xl\:img-center {     --img-x: center;              }
    .xl\:img-left {       --img-x: left;                }
    .xl\:img-right {      --img-x: right;               }
    .xl\:img-top {        --img-y: top;                 }
    .xl\:img-middle {     --img-y: center;              }
    .xl\:img-bottom {     --img-y: bottom;              }
}
@media (min-width: 1540px)  { 
    .xxl\:text-center {     text-align: center;                 } 
    .xxl\:text-left {       text-align: left;                   } 
    .xxl\:text-right {      text-align: right;                  } 

    .xxl\:content-center {   justify-content: center;            }
    .xxl\:content-left {     justify-content: flex-start;        }
    .xxl\:content-right {    justify-content: flex-end;          }
    .xxl\:content-justify {  justify-content: space-between;     }
    .xxl\:content-padded {   justify-content: space-around;      }
    .xxl\:content-top {      align-content: flex-start;          }
    .xxl\:content-middle {   align-content: center;              }
    .xxl\:content-bottom {   align-content: flex-end;            }
    .xxl\:content-stretch {  align-content: stretch;             }

    .xxl\:items-center {     justify-items: center;              }
    .xxl\:items-left {       justify-items: flex-start;          }
    .xxl\:items-right {      justify-items: flex-end;            }
    .xxl\:items-justify {    justify-items: stretch;             }
    .xxl\:items-top {        align-items: flex-start;            }
    .xxl\:items-middle {     align-items: center;                }
    .xxl\:items-bottom {     align-items: flex-end;              }
    .xxl\:items-stretch {    align-items: stretch;               }

    .xxl\:self-left {        justify-self: flex-start;           }
    .xxl\:self-right {       justify-self: flex-end;             }
    .xxl\:self-center {      justify-self: center;               }
    .xxl\:self-justify {     justify-self:stretch;               }
    .xxl\:self-middle {      align-self: center;                 }
    .xxl\:self-top {         align-self: flex-start;             }
    .xxl\:self-bottom {      align-self: flex-end;               }
    .xxl\:self-stretch {     align-self: stretch;                }

    .xxl\:img-center {     --img-x: center;              }
    .xxl\:img-left {       --img-x: left;                }
    .xxl\:img-right {      --img-x: right;               }
    .xxl\:img-top {        --img-y: top;                 }
    .xxl\:img-middle {     --img-y: center;              }
    .xxl\:img-bottom {     --img-y: bottom;              }
}