.iframe-container {
    position: relative; /* Establishes a positioning context for the absolute iframe */
    width: 100%; /* Ensures the container takes full width of its parent */
    /* Calculate padding-bottom for aspect ratio: height / width * 100%.
        For a 480px height and 230px width (original dimensions): 480 / 230 * 100% ≈ 208.69%
        Let's aim for a more common 16:9 aspect ratio or similar,
        or simply use the original ratio. Let's use the original ratio for now.
        If you want 16:9, padding-bottom would be (9/16)*100% = 56.25%
        Let's use 208.69% for original aspect ratio. */
    padding-bottom: 208.69%; /* This creates the height, maintaining aspect ratio */
    height: 0; /* Collapses the container's height */
    overflow: hidden; /* Hides any content that might overflow */
    border-radius: 0.5rem; /* Apply rounded corners to the container */
}

/* The iframe itself */
.iframe-container iframe {
    position: absolute; /* Positions the iframe absolutely within its container */
    top: 0; /* Aligns to the top of the container */
    left: 0; /* Aligns to the left of the container */
    width: 100%; /* Makes the iframe take the full width of its container */
    height: 100%; /* Makes the iframe take the full height of its container */
    border: none; /* Removes default iframe border */
    border-radius: 0.5rem; /* Apply rounded corners to the iframe itself */
}

/* The iframe itself */
.iframe-container iframe {
    position: absolute; /* Positions the iframe absolutely within its container */
    top: 0; /* Aligns to the top of the container */
    left: 0; /* Aligns to the left of the container */
    width: 100%; /* Makes the iframe take the full width of its container */
    height: 100%; /* Makes the iframe take the full height of its container */
    border: none; /* Removes default iframe border */
    border-radius: 0.5rem; /* Apply rounded corners to the iframe itself */
}