/* Responsive CSS */

/* Desktop */
@media screen and (min-width: 992px) {
  /* Add desktop styles here */
  .music-animated-card-container .w-clearfix.w-dyn-items.w-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
  }

  .music-animated-card-container .listitem {
    flex: 1 1 calc(50% - 10px); /* Adjust 10px for half of your desired gap */
    margin-bottom: 20px; /* Adjust as needed */
  }
}

/* Tablet */
@media screen and (min-width: 768px) and (max-width: 991px) {
  .w-row {
    flex-direction: column !important;
  }
  .w-row .w-col.w-col-medium-1,
  .w-row .w-col.w-col-medium-2,
  .w-row .w-col.w-col-medium-3,
  .w-row .w-col.w-col-medium-4,
  .w-row .w-col.w-col-medium-5,
  .w-row .w-col.w-col-medium-6,
  .w-row .w-col.w-col-medium-7,
  .w-row .w-col.w-col-medium-8,
  .w-row .w-col.w-col-medium-9,
  .w-row .w-col.w-col-medium-10,
  .w-row .w-col.w-col-medium-11,
  .w-row .w-col.w-col-medium-12 {
    width: 100% !important;
  }
  .music-animated-card-container .w-clearfix.w-dyn-items.w-row {
    display: flex;
    flex-direction: column;
  }
  .music-animated-card-container .listitem {
    width: 100%;
  }
}

/* Mobile */
@media screen and (max-width: 767px) {
  .w-row {
    flex-direction: column !important;
  }
  .w-row .w-col.w-col-small-1,
  .w-row .w-col.w-col-small-2,
  .w-row .w-col.w-col-small-3,
  .w-row .w-col.w-col-small-4,
  .w-row .w-col.w-col-small-5,
  .w-row .w-col.w-col-small-6,
  .w-row .w-col.w-col-small-7,
  .w-row .w-col.w-col-small-8,
  .w-row .w-col.w-col-small-9,
  .w-row .w-col.w-col-small-10,
  .w-row .w-col.w-col-small-11,
  .w-row .w-col.w-col-small-12 {
    width: 100% !important;
    float: none !important;
  }
  .work {
    display: block;
    width: 100%;
    /* margin-top: 0px; */
    margin-right: 0px;
    margin-left: 0px;
    padding-top: 40px;
  }
  .menutext.homepage {
    display: none !important;
  }
  .headerimage img {
    margin-right: 50px !important;
  }
  .textField {
    position: absolute;
    margin-top: 340px !important;
  }
  .musicField {
    position: absolute;
    margin-top: 365px !important;
    margin-left: 0px !important;
  }
  .politicsField {
    margin-top: 240px !important;
  }
  .w-row .w-col.w-col-6 {
    width: 100% !important;
  }
  .w-row .w-col.w-col-8 {
    width: 100% !important;
  }
  .w-row .w-col.w-col-4 {
    width: 100% !important;
  }
  .tile.singleImage {
    position: relative;
    height: 400px;
  }
  .overlaylg {
    width: 86%;
    margin-left: 15px;
    margin-top: 247px;
  }
  /* .digitalArtCard {
    position: relative;
    text-align: center;
  }
  .digitalArtText {
    position: absolute;
    margin-top: 50px;
    background-color: white;
    width: 100%;
    padding: 5px;
  } */

  .tile {
    display: block;
    width: 100%;
    height: 300px;
    padding: 20px;
    border-bottom: 1px none #000;
    background-image: url("https://d3e54v103j8qbb.cloudfront.net/img/background-image.svg");
    background-position: 50% 50%;
    /* background-size: contain; */
    text-decoration: none;
    list-style-type: none;
    background-repeat: no-repeat;
  }
  .posterCard {
    display: block;
    width: 100%;
    height: 300px;
    padding: 20px;
    border-bottom: 1px none #000;
    background-image: url("https://d3e54v103j8qbb.cloudfront.net/img/background-image.svg");
    background-position: 50% 50%;
    background-size: contain;
    text-decoration: none;
    list-style-type: none;
    background-repeat: no-repeat;
  }
  .tile.mango {
    height: 300px !important;
  }
  .tile.repeat {
    height: 300px !important;
  }
  .homepagetitles {
    font-size: 24px !important;
  }
  .footerText {
    font-size: 16px !important;
  }
  .threeCard {
    flex-direction: column !important;
  }
  .twoCard {
    flex-direction: column !important;
  }
  .music-animated-card-container .w-clearfix.w-dyn-items.w-row {
    display: flex;
    flex-direction: column;
  }
  .music-animated-card-container .listitem {
    width: 100%;
  }
    .musicField {
    position: absolute;
    margin-top: 305px !important;
    margin-left: 0px !important;
}
 .posterCard {
    height: 170px;
}
}

@media screen and (max-width: 479px) {
  .homepagetitles {
    font-size: 20px !important;
  }
  .footerText {
    font-size: 14px !important;
  }
  .mobileHeight{
    height:220px
  }
  .mango {
    height: 350px;
}
.musicField {
    position: absolute;
    margin-top: 305px !important;
    margin-left: 0px !important;
}
.posterTextBg{
  margin-top:125px
}
.sportsTextBg{
  margin-top:125px
}
.aboutField{
  height: 200px !important;
  margin-top: -100px;
}
}